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

css, twitter-bootstrap

Solution

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 */
}

Problem

I'm working on a web app using Twitter Bootstrap. In one of our views, there is a table that uses the `.table-hover` class. There are some specific cells in the table that I don't want to highlight when the rest of their rows highlight, though. What style rules should I use to achieve this effect? This is roughly how my view table is organized: ``` <table class="table table-hover"> <thead> <tr> <th /> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Row Group "Heading" 1</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td rowspan="2">Row Group "Heading" 2</td> <td>Content</td> <td>Content</td> <td>Content</td> </tr> <tr> <td>Content</td> <td>Content</td> <td>Content</td> </tr> </tbody> </table> ``` I want to make the cells that span 2 rows not highlight when they are hovered over. EDIT: I tried this CSS: ``` td.rowTitle:hover { background-color: transparent; } ``` It doesn't work, unfortunately. I think it may be because the whole row is being highlighted, not just the cell...

Original source