Bootstrap table striped: How do I change the stripe background colour?

Question

With Bootstrap class table-striped, every other row in my table has a background colour equal to #F9F9F9. How can I change this colour?

score 165 · Answer 1 · edited Jul 24 '16 at 19:40

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
 }

edited Jul 24 '16 at 19:40

reformed

4,505
11
62
88

answered Dec 29 '13 at 12:40

kyriakos

1,835
2
10
10

works well on overwriting the default bootstrap table color. Thank you. – euccas Aug 26 '15 at 22:21
2

This disable the "table-hover" class on even rows... is there a fix? – exSnake Dec 01 '18 at 00:36
And while we use the color here, we do not need to have "table-striped" class. – AgentNirmites Mar 05 '22 at 13:21
for those coming through to this in `>= 2022`, @Waar's answer is how it should be done now: https://stackoverflow.com/a/65874571/827129 – fredrivett Oct 22 '22 at 10:41

Florin · Accepted Answer · 2022-04-29T15:35:48.530

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)

edited Apr 29 '22 at 15:35

answered Dec 29 '13 at 12:40

Florin

5,781
2
20
30

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. – Ben Thurley Aug 08 '14 at 11:53
1

How would you change the background-color for hovering the whole row here? – Barry Michael Doyle Aug 19 '15 at 16:07
2

this page explain how to do it for a hover [http://stackoverflow.com/questions/15643037/how-do-i-change-the-hover-over-color-for-a-hover-over-table-in-bootstrap] – Yvon Huynh Nov 28 '15 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 06 '16 at 21:10
1

Never change any third-party library directly. Never! Just override the style in your own css file. – Mehrdad Feb 03 '17 at 18:18

score 16 · Answer 3 · answered Apr 18 '14 at 13:31

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;

score 13 · Answer 4 · answered Dec 29 '13 at 12:39

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

answered Dec 29 '13 at 12:39

Eisa Adil

1,743
11
16

Didn't work for me. The answer by kyriakos works really well. – varagrawal Mar 27 '16 at 01:16
This example is missing the tbody tag – kenecaswell Jun 28 '17 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 01 '20 at 10:43

score 9 · Answer 5 · answered May 30 '20 at 20:30

9

Easiest way for changing order of striped:

Add empty tr before your table tr tags.

answered May 30 '20 at 20:30

Royal_MGH

766
4
8

this do the trick – Felipe Castillo Oct 19 '22 at 18:10

score 6 · Answer 6 · answered Nov 18 '19 at 18:15

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

score 5 · Answer 7 · edited Sep 04 '18 at 07:12

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.

edited Sep 04 '18 at 07:12

ochs.tobi

3,214
7
31
52

answered Sep 04 '18 at 05:55

sammani anuththara

135
2
7

This disable the table-hover class of bootstrap, there is a way to use both? – exSnake Dec 01 '18 at 00:39

score 5 · Answer 8 · answered Apr 16 '20 at 08:55

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

score 4 · Answer 9 · answered Sep 25 '20 at 13:59

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;

answered Sep 25 '20 at 13:59

ow3n

5,974
4
53
51

score 3 · Answer 10 · answered Mar 30 '15 at 13:25

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

score 3 · Answer 11 · answered Apr 01 '15 at 14:45

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.

score 3 · Answer 12 · edited Oct 22 '22 at 10:40

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

edited Oct 22 '22 at 10:40

fredrivett

5,419
3
35
48

answered Jan 24 '21 at 18:45

Waar

31
3

this should be the go-to answer these days – fredrivett Oct 22 '22 at 10:40

score 3 · Answer 13 · answered Feb 11 '21 at 11:04

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

Reuven770 · Answer 14 · 2021-08-27T19:30:56.313

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

edited Aug 27 '21 at 19:30

answered Aug 27 '21 at 19:03

Reuven770

11
2

score 0 · Answer 15 · answered Jan 13 '16 at 22:45

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.

answered Jan 13 '16 at 22:45

PhPGuy

41
3

score 0 · Answer 16 · answered Jun 21 '22 at 13:23

0

The code below solved my project

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

answered Jun 21 '22 at 13:23

kapitan

2,008
3
20
26

Bootstrap table striped: How do I change the stripe background colour?

16 Answers16

Easiest way for changing order of striped:

Linked