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

Question

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...

Answer 1

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