Bootstrap Table Striped: How to Change the Stripe Background Colour

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

.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)

Change color in Bootstrap's striped tables... but only on some of them

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.

How can I change Bootstrap table-striped in a less specific way?

You have to be more specific than the Bootstrap styles.

For example like this:

.table-striped>tbody>tr.selectedRow:nth-child(odd)>td,
.table-striped>tbody>tr.selectedRow:nth-child(even)>td {
    background-color: #819bbf;
    color: black; 
}

I hope you get the idea.

Bootstrap table striped: How do I change the stripe background colour ONLY FOR 1 COLUMN?

You can use ngClass to conditionally apply style to a specific cell, ngRepeat will repaint it for every row.

Something like this

<tr ng-repeat="unit in data">
  <td ng-class="{'highlight': selected==='name'}">{{unit.name}}</td>
  <td ng-class="{'highlight': selected==='model'}">{{unit.model}}</td>
  <td ng-class="{'highlight': selected==='price'}">{{unit.price}}</td>
</tr>

depending on the value of selected, a td will be applied by the highlight class

Here's a demo

Bootstrap 4 beta ( latest version ) Change colors of striped table

If you inspect the element on the demo page Bootstrap v4 tables you will see that they are targeting the Bootstrap .table-striped class. Specifically, the odd rows. Here's a demo that should help JSfiddle.

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

CSS - Background overwriting Bootstrap table-striped

Actually its not overriding the table-striped because this class set background color for some rows and don't set for other, it uses this selector .table-striped>tbody>tr:nth-of-type(odd)

so when you use background color on the parent div then automatically that color is filled in the rows that don't have any background color

if you want to fix that you may wanna set background color to row with no background color by adding this code:

.table-striped>tbody>tr:nth-of-type(even) {
    background-color: #fff;
}

See code snippet:

.highlight-lighter {  background-color: #fafafa;}
.table-striped>tbody>tr:nth-of-type(even) {    background-color: #fff;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="highlight-lighter ">  <table class="table table-striped">    <tbody>      <tr class="row">        <th class="col-sm-6">Foo</th>        <th class="col-sm-6">Bar</th>      </tr>      <tr class="row">        <td class="col-sm-6">1</td>        <td class="col-sm-6">2</td>      </tr>      <tr class="row">        <td class="col-sm-6">3</td>        <td class="col-sm-6">4</td>      </tr>    </tbody>  </table>  <div>    <p>some text</p>  </div>

Inherit Bootstrap table stripe color

Unfortunately, CSS does not provide 'inheritance' in the way that programming languages like C++, C#, or Java do. You can't declare a CSS class and then extend it with another CSS class.

However, you can apply more than a single class to a tag in your markup ... in which case there is a sophisticated set of rules that determine which actual styles will get applied by the browser.

See https://stackoverflow.com/a/1065476/3842598

The accepted answer says:

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

...

See https://stackoverflow.com/a/1065476/3842598

Bootstrap table-striped does not change color

It seems bootstrap is setting every td background-color. So setting the tr to a background color does not work, even if you add !important. I solved it by adding a class to every td with the required background-color

css:

.selected { background-color: #ddd !important; }

code:

note: code is part of a function which checks if a checkbox within the first td of the row is clicked.

$(this).parent().parent().children('td').each(function() {
 $(this).addClass("selected");
});

It might not be a neat solution, but it works :)

Alter bootstrap's table striped Rows to be every other couple rows?

.yourTableClass tr:nth-child(4n+1), .yourTableClass tr:nth-child(4n+2) {
 background: pink;
}