1

I want to customize the colors of Bootstrap's striped tables... but only of some of them. In other words, I don't want a global change; I just want to customize the colors in one specific table on my site. Following these two questions:

How to combine class and ID in CSS selector?

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

I tried to define my table and CSS as:

<table class="table-condensed table-striped" id="info_envio">

#info_envio.table-striped>tr:nth-child(odd){
   background-color:red;
}

But it doesn't work.

I have the feeling that it must be something really simple. A little hand, please?

Community
  • 1
  • 1
PaulJ
  • 1,646
  • 5
  • 33
  • 52

3 Answers3

3

I think you are missing the tbody in the selector and nth-of-type.

#info_envio.table-striped>tbody>tr:nth-of-type(odd){
   background-color:red;
}

Older versions (less than v3.3.0) of Bootstrap may assign the background color to the cell instead of the row, so if the above doesnt work, try this next.

#info_envio.table-striped>tbody>tr:nth-child(odd)>td, 
#info_envio.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: red;
}

From v3.3.0 change log...

#13920: Assign background-color to <tr> elements instead of <th>/<td> within the .table-striped to avoid broken backgrounds on responsive tables.

Schmalzy
  • 17,044
  • 7
  • 46
  • 47
1

Make sure you are using the same selector bootstrap does.

For the current version it would be:

 #info_envio.table-striped>tbody>tr:nth-of-type(odd) {
     background-color: red;
 }

The key difference being :nth-of-type(odd) not :nth-child(odd)

See this Example fiddle

Ted
  • 14,757
  • 2
  • 41
  • 58
-1
.table-striped>tbody>tr:nth-child(odd)>td,  
.table-striped>tbody>tr:nth-child(odd)>th {    
    background-color: #f2f2f2; //Choose your own color here  
}
Juan Serrats
  • 1,358
  • 5
  • 24
  • 30
ranjith
  • 1