With Bootstrap class table-striped
, every other row in my table has a background colour equal to #F9F9F9
. How can I change this colour?
16 Answers
Add the following CSS style after loading Bootstrap:
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: red; // Choose your own color here
}
-
works well on overwriting the default bootstrap table color. Thank you.– euccasAug 26, 2015 at 22:21
-
2
-
And while we use the color here, we do not need to have "table-striped" class. Mar 5, 2022 at 13:21
-
for those coming through to this in
>= 2022
, @Waar's answer is how it should be done now: stackoverflow.com/a/65874571/827129 Oct 22, 2022 at 10:41
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: red;
}
add this line into your style.css after main bootstrap.css or you could use (odd) or (even) instead of (2n+1)
-
119Don't do this. Next time you upgrade bootstrap you'll lose your custom override. Much better to have custom css in a separate file which you put directly after bootstrap.css in the head. Aug 8, 2014 at 11:53
-
1How would you change the background-color for hovering the whole row here? Aug 19, 2015 at 16:07
-
2this page explain how to do it for a hover [stackoverflow.com/questions/15643037/… Nov 28, 2015 at 22:20
-
4This was the answer I needed, however, I added it to a separate CSS file, not the actual Bootstrap CSS. It's cascading so if I add it after the bootstrap and it works perfectly and keeps it out of the main bootstrap. Plus then I don't have to carry my own modified bootstrap instead I just add my css to each project that needs this.– raddevusApr 6, 2016 at 21:10
-
1Never change any third-party library directly. Never! Just override the style in your own css file.– MehrdadFeb 3, 2017 at 18:18
If you are using Bootstrap 3, you can use Florin's method, or use a custom CSS file.
If you use Bootstrap less source instead of processed css files, you can directly change it in bootstrap/less/variables.less
.
Find something like:
//** Background color used for `.table-striped`.
@table-bg-accent: #f9f9f9;
You have two options, either you override the styles with a custom stylesheet, or you edit the main bootstrap css file. I prefer the former.
Your custom styles should be linked after bootstrap.
<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">
In custom.css
.table-striped>tr:nth-child(odd){
background-color:red;
}
-
-
-
the > means immediate child, so if there is a tbody tag between table and tr, it won't work. but just remove the >, and it will be valid for all tr under a specified table, no matter if they are immediate children or not. May 1, 2020 at 10:43
Easiest way for changing order of striped:
Add empty tr
before your table tr tags.
Delete table-striped Its overriding your attempts to change row color.
Then do this In css
tr:nth-child(odd) {
background-color: lightskyblue;
}
tr:nth-child(even) {
background-color: lightpink;
}
th {
background-color: lightseagreen;
}
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: #e08283;
color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
background-color: #ECEFF1;
color: white;
}
Use 'even' for change colour of even rows and use 'odd' for change colour of odd rows.
-
This disable the table-hover class of bootstrap, there is a way to use both?– exSnakeDec 1, 2018 at 0:39
With Bootstrap 4, the responsible css configuration in bootstrap.css
for .table-striped
is:
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
For a very simple solution, I just copied it into my custom.css
file, and changed the values of background-color
, so that now I have a fancier light blue shade:
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(72, 113, 248, 0.068);
}
If using SASS and Bootstrap 4, you can change the alternating background row color for both .table
and .table-dark
with:
$table-accent-bg: #990000;
$table-dark-accent-bg: #990000;
I found this checkerboard pattern (as a subset of the zebra stripe) to be a pleasant way to display a two-column table. This is written using LESS CSS, and keys all colors off the base color.
@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);
@other-row: darken(@row-color, 10%);
tbody {
td:nth-child(odd) { width: 45%; }
tr:nth-child(odd) > td:nth-child(odd) {
background: darken(@row-color, 0%); }
tr:nth-child(odd) > td:nth-child(even) {
background: darken(@row-color, 7%); }
tr:nth-child(even) > td:nth-child(odd) {
background: darken(@other-row, 0%); }
tr:nth-child(even) > td:nth-child(even) {
background: darken(@other-row, 7%); }
}
Note I've dropped the .table-striped
, but doesn't seem to matter.
Looks like:
Don't customize your bootstrap CSS by directly editing bootstrap CSS file.Instead, I suggest to copy paste bootstrap CSS and save them in a different CSS folder and there you can customize or edit stylings suitable to your needs.
I know this is an old post, but changing th or td color is not te right way. I was fooled by this post as well.
First load your bootstrap.css and add this in your own css. This way it is only 2 lines if you have a hovered table, else its only 1 line, unless you want to change odd and even :-)
.table-striped>tbody>tr:nth-child(odd) {
background-color: LemonChiffon;
}
.table-hover tbody tr:hover {
background-color: AliceBlue;
}
I came across this post while hunting down a solution for myself. By using chrome's inspector, I was able to determine that the striped color was being applied from the --bs-table-striped-color
tag.
You can override that tag in your CSS like so:
table {
--bs-table-striped-color: #85d1ee;
}
Bootstrap 5 using --#{$variable-prefix}table-accent-bg
take into consideration
.table-striped>tbody>tr:nth-child(odd) > td:hover {
--#{$variable-prefix}table-accent-bg: #000099;
}
If you want to actually reverse the colors, you should add a rule that makes the "odd" rows white as well as making the "even" rows whatever color you want.
The code below solved my project
.table {
--bs-table-striped-bg: #efefef !important;
}