Twitter Bootstrap Remove Table Row Highlight with Row Stripes

Twitter Bootstrap remove table row highlight with row stripes

@Blender's answer is right on, but only if you are not using the .table-striped class on your table.

If you are using the .table-striped class, the row highlight will not go away when you hover over a row that has the light-grey colored stripe.

What will happen when you hover over the light-grey row is that the row will change from light-grey to transparent (white), and thus you will be inadvertently implementing a row-hover effect on all the light-grey colored rows.

If you need to take away the hover effect from the striped rows as well, then building upon Blender's original answer, I think you would have another rule to over-ride:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: transparent;
}

.table-striped tbody tr:nth-child(odd):hover td {
   background-color: #F9F9F9;
}

good example: Here's a link to a working jsfiddle example where the .table-striped class is accounted for:
http://jsfiddle.net/pXWjq/

buggy example: And here's an example where the table row hover still happens (on the grey rows) because the grey-row hover is not accounted for:
http://jsfiddle.net/448Rb/

​

Remove table-hover effect for a single cell in a Twitter Bootstrap table

This is what the bootstrap CSS looks like:

.table-hover { 
             tbody { tr:hover td, tr:hover th 
                             { background-color: @tableBackgroundHover; } 
                        }
           }

With a bit of JQuery:

  $('td[rowspan]').addClass('hasRowSpan');

You can then use the following CSS to override it:

tbody tr:hover td.hasRowSpan { 
          background-color: none;   /* or whatever color you want */
} 

Twitter bootstrap take out the hover background color on tables

You can add the following on your stylesheet to overwrite that feature:

.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: transparent;
}

Demo: http://jsfiddle.net/BJrnC/2/

---

Note: Noticed that I'm still getting upvoted for this answer. The twitter bootstrap now does this by default. If you want to add hover effects to a table simply add the .table-hover hover class to the body of your table, otherwise just omit it and it should not have any effects when hovered. This only applies to the latest version of the bootstrap.

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)

Add highlight on clickable table row (using bootstrap) - CSS

Try using the 'table-hover' and override the color like this..

.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
  background-color: #550055;
  color:#eeeeee;
}

http://bootply.com/93988

Highlighting the clicked row of a striped HTML table

http://jsfiddle.net/iambriansreed/xu2AH/9/

.table-striped class

.table-striped tbody tr.highlight td { background-color: red; }

... and cleaner jQuery:

$('#mytable tbody tr').live('click', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});​

Update: .live() has since been deprecated. Use .on().

$('#mytable').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});​

Fixed: http://jsfiddle.net/iambriansreed/xu2AH/127/

Applying text-success to a Bootstrap 5 table row that is striped has no effect

That's because in bootstrap 5.1.2 and up there is this rule:

.table-striped > tbody > tr:nth-of-type(2n+1) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color);
}

This selector above overrides in terms of specificity your selector, so you just need to make your more specific

Note: this is plan to be fixed in v5.3

---

//$("#mytable tbody tr > *").click(function() {
//  $(this).toggleClass("text-success")
//})

//arrow function version
//$("#mytable tbody tr > *").click(e => $(e.currentTarget).toggleClass("text-success"))

//updated version - OP Comment - "Great, thanks. Is there a way to highlight the whole table row instead of just the column I click one?."

$("#mytable tbody tr > *").click(e => $(e.currentTarget).parent().find('td').toggleClass("text-success"))

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<main class="container clearfix">
  <div class="row mt-4 mb-4">
    <div class="col-md-8 offset-md-2">
      <table id="mytable" class="table table-striped table-sm">
        <thead>
          <tr>
            <th>Col1</th>
            <th>Col2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
          <tr>
            <td>Column 1</td>
            <td>Column 2</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</main>

Remove table-hover effect from some row of the table?

background-color: none; doesn't exist... It should be transparent. But this won't work for you because you will have the color of the tr...

So you will have to set a color like :

.hidden-table:hover {
     background-color: white !important;
 }

EDIT:

As your table also has the bootstrap classes table-hover and other, you will have to override this properties :

.table-hover > tbody > tr:hover > td

So something like :

.table-hover > tbody > tr.hidden-table:hover > td {
     background-color: white;
 }

How to prevent table row highlight from going away on hover

You can use the .not() selector to specify that the hover should not affect rows with the .highlight class:

.table-hover tbody tr:not(.highlight):hover td {
  background-color: #428bca;
  color: black
}

.table tbody tr:not(.highlight):hover td,
.table tbody tr:not(.highlight):hover th {
    background-color: transparent;
}

---

Related Topics