CODEWITHSUNDEEP
csstwitter-bootstrap
Programmer9000
Programmer9000

Reputation: 2187

CSS overriding bootstrap table

Here're my selectors:

table.table.table-striped.vitalStatisticsTable th,
table.table.table-striped.vitalStatisticsTable td {
  line-height: 1;
  padding: .4rem; 
  background-color: red;
}

Here's my markup:

<table class="table table-striped vitalStatisticsTable">
  <tr>
    <th scope="row">Education</th>
    <td>Post Graduate</td>
  </tr>
  <tr>
  <th scope="row">Vices</th>
    <td>Drinks socially</td>
  </tr>
  <tr>
    <th scope="row">Race</th>
    <td>White</td>
  </tr>
  <tr>
    <th scope="row">Pets</th>
    <td>George the turtle</td>
  </tr>
</table>

My rules are not applied, but I'm not really sure what i'm doing wrong. I thought I had to increase specificity, and as I understand it, I am being more specific than bootstrap, but maybe i'm missing something. Can someone help a css n00b out?

Upvotes: 0

Views: 823

Answers (2)

Programmer9000
Programmer9000

Reputation: 2187

Well. Actually this does work. I had an extra "}" in my CSS file. I'm ashamed and relieved all at the same time.

Upvotes: 1

Syed Nurul Islam
Syed Nurul Islam

Reputation: 1

You can use this: table.vitalStatisticsTable th, table.vitalStatisticsTable td This will work. All class not need to mention in selector.

Upvotes: 0

Related Questions