CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
patwoj98
patwoj98

Reputation: 447

Bootstrap rule and my class doesn't cooperate

On my page, I use bootstrap. I created table and it has 3 classes, check it:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
</table>

Now I use code jQuery. This code added class highlight. Class highlight:

.highlight {
  background-color: orange;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
  <tr>
    <td>&nbsp</td>
    <td>&nbsp</td>
  </tr>
</table>

When table has only one class: "table" it's working. But I must have table-striped and table-bordered. When it is, highlight is working only with even numbers. How can I fix that?

Upvotes: 0

Views: 47

Answers (3)

m4n0
m4n0

Reputation: 32275

enter image description here In your jQuery code, instead of .highlight use .highlight > tbody > tr

.highlight > tbody > tr {
   background-color: orange;
}

Upvotes: 1

Frogmouth
Frogmouth

Reputation: 1818

If I understand your problem: every time you add highlight with jQuery to your table nothing happens (or not all table raws become orange).

Probably if the background-color of the table isn't set on table but on td.

Try to change simply your CSS selector:

.highlight{
    background-color:orange;
}

to

.highlight tr td{
    background-color:orange;
}

Watch this example: http://jsfiddle.net/pujsghe6/

Upvotes: 1

technophobia
technophobia

Reputation: 2629

It's a css specificity issue.

Bootstrap applies the alternating row class like this:

.table-striped>tbody>tr:nth-of-type(odd)

You need to be as specific as that or more.

Row highlight example:

.table>tbody>tr.highlight>td {
    // change your background color here
}

Cell highlight example:

.table>tbody>tr>td.highlight {
    // change your background color here
}

Note: I'm assuming you want to highlight some rows or cells, not the entire table.

Upvotes: 2

Related Questions