Overriding Bootstrap Table-Striped CSS

Overriding bootstrap table-striped CSS

Write specific selector to override the bootstrap ones

table.table.table-striped tr.found td {
    background-color:#CECBCB;
}

Demo

Also, not only specificity matters here, make sure you apply the background to the td element and not the tr because bootstrap is applying to the td element so even if you apply the background to tr won't make sense.

As you said that you wanted the explanation for the selector I wrote, so here it goes, let us break that and understand..

Starting off with this

table.table.table-striped - Over here am selecting a table element having classes .table AS WELL AS .table-striped

Going further with the selector, tr.found we select the tr elements having a class called .found and lastly, we select the nested td elements.

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)

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>

Overriding bootstrap table-striped rows with jquery onclick function

Use link to your CSS file after link to the bootstrap CSS. For example:

<head>
    ...
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    ...
    <link rel="stylesheet" type="text/css" href="mytheme.css">
</head>

Note, you could add any query string to your CSS-file URL to avoid сaching problem:

<link rel="stylesheet" href="mytheme.css?version=new">

Also you can use !important rules in your CSS as a last resort.

.highlight {  background-color: red !important;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><div class="table-responsive">  <table class="table table-bordered table-striped">    <colgroup>      <col class="col-xs-1">      <col class="col-xs-7"> </colgroup>    <thead>      <tr>        <th>Class</th>        <th>Description</th>      </tr>    </thead>    <tbody>      <tr>        <th scope="row">Text</th>        <td>Text</td>      </tr>      <tr>        <th scope="row">Text</th>        <td>Text</td>      </tr>      <tr class="highlight">        <th scope="row">Text</th>        <td>highlited row</td>      </tr>      <tr>        <th scope="row">Text</th>        <td>Text</td>      </tr>      <tr>        <th scope="row">Text</th>        <td>Text</td>      </tr>    </tbody>  </table></div>

How to override bootstrap table td style?

Simply increase the specificity of your selector. If what you have currently doesn't work, try adding the table into it as well:

[data-name="md-PersianDateTimePicker"] table.table.table-striped td[data-name="day"] {
    padding: 2px;
}

Trying to overwrite Bootstrap table-striped color in LESS not applying?

table-striped class has to be added to the table div (you have to use &).
Proper selector for striped table is .table-striped > tbody > tr:nth-of-type(odd).
If you want to change th you have to use different selectors (to avoid low specificity).

.vtc-table {
  .table;
  .table-condensed;
  .table-bordered; 
  .table-hover;
  &.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: antiquewhite;
  }
  > thead > tr > th,
  > tbody > tr > th,
  > tfoot > tr > th {
    background-color: #2FA4E7;
    color: white;
  } 
}

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.

Overriding Bootstrap Table-Striped CSS