154

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 16

165

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
 }
4
  • works well on overwriting the default bootstrap table color. Thank you.
    – euccas
    Aug 26, 2015 at 22:21
  • 2
    This disable the "table-hover" class on even rows... is there a fix?
    – exSnake
    Dec 1, 2018 at 0:36
  • 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
    – fredrivett
    Oct 22, 2022 at 10:41
137
.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)

5
  • 119
    Don'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
  • 1
    How would you change the background-color for hovering the whole row here? Aug 19, 2015 at 16:07
  • 2
    this page explain how to do it for a hover [stackoverflow.com/questions/15643037/…
    – Yvon Huynh
    Nov 28, 2015 at 22:20
  • 4
    This 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.
    – raddevus
    Apr 6, 2016 at 21:10
  • 1
    Never change any third-party library directly. Never! Just override the style in your own css file.
    – Mehrdad
    Feb 3, 2017 at 18:18
16

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;
13

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;
}
3
  • Didn't work for me. The answer by kyriakos works really well.
    – varagrawal
    Mar 27, 2016 at 1:16
  • This example is missing the tbody tag Jun 28, 2017 at 16:55
  • 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.
    – jumps4fun
    May 1, 2020 at 10:43
9

Easiest way for changing order of striped:

Add empty tr before your table tr tags.

1
6

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;
    }
5
.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.

1
  • This disable the table-hover class of bootstrap, there is a way to use both?
    – exSnake
    Dec 1, 2018 at 0:39
5

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);
}
4

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;
3

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: enter image description here

0
3

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.

3

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;
}
1
  • There we go! Thanks!
    – Ole M
    Nov 3, 2022 at 11:28
3

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;
}
1
  • this should be the go-to answer these days
    – fredrivett
    Oct 22, 2022 at 10:40
1

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;
}
0

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.

0

The code below solved my project

.table {
  --bs-table-striped-bg: #efefef !important;
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.