Home/ Questions/Q 623671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T19:07:05+00:00

I have a table where: The rows and cells normally have no background specified;

  • 0

I have a table where:

  • The rows and cells normally have no background specified; the table’s background shows through.
  • Rows with the :hover pseudo-class have a background color to highlight them — e.g., to track rows as the mouse moves over the table (in IE7 and anything else modern).
  • Some cells need to be highlighted with a different background color (and various other styles); these have their own class.

The problem is that I want the special cells not to be special when the row is being highlighted by the hover; it looks really strange. I need to support IE7 (thankfully not 6!) and naturally want to support Chrome, Firefox, Safari, and most other modern browsers.

Here are trimmed-down versions of the relevant rules:

table.status
{
    border-collapse:  collapse;
    background-color: #CDD8ED;
}
table.status tr:hover
{
    background-color: #FAF0BD;
}
/* "down" cells are special */
table.status td.down
{
    background-color: #D22;
    color:            white;
}

Things I’ve tried:

  • The :not pseudo-class from CSS3: table.status tr:not(:hover) td.down. Works in Chrome and Firefox, not in IE7.
  • A more-specific rule (e.g., table.status tr:hover td.down) that reiterates the properties using the keyword inherit. (Blech, fragile, have to be sure when adding styles to the one rule that you add inherit styles to the other rule.) Again works in Chrome and Firefox, not in IE7.

Things I’d really rather not do:

  • A more-specific rule setting the relevant styles so they match the styles of the table. Blech, even more fragile than the inherit thing above. But functional.
  • Use JavaScript for the hover effect (although that would have the advantage of supporting IE6 as well). Hovers in JavaScript tend to have more overhead than built-in ones.

Is there another CSS solution?

FWIW, here’s my test page:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Hover Test Page</title>
<style type='text/css'>
body
{
    font-family: sans-serif;
}
table.status
{
    border-collapse: collapse;
    background-color: #CDD8ED;
}
table.status th
{
    text-align: left;
    background-color: #14429E;
    color: #FEFEFE;
}
table.status td, table.status th
{
    padding: 2px 0.5em;
}
table.status tr:hover
{
    background-color: #FAF0BD;
}
/*table.status tr:not(:hover) td.down*/
table.status td.down
{
    background-color:   #D22;
    color:              white;
    font-weight:        bold;
}
/*table.status tr:hover td.down
{
    background-color:   inherit;
    color:              inherit;
    font-weight:        inherit;
}*/
</style>
</head>
<body>
<table class='status'>
    <thead>
        <tr>
            <th>Server</th>
            <th>Details</th>
            <th>www</th>
            <th>mail</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Server1</td>
            <td>blah blah blah</td>
            <td class='up'>Up</td>
            <td class='up'>Up</td>
        </tr>
        <tr>
            <td>Server2</td>
            <td>blah blah blah</td>
            <td class='up'>Up</td>
            <td class='down'>Down</td>
        </tr>
        <tr>
            <td>Server3</td>
            <td>blah blah blah</td>
            <td class='sched'>Down (scheduled)</td>
            <td class='sched'>Down (scheduled)</td>
        </tr>
        <tr>
            <td>Server4</td>
            <td>blah blah blah</td>
            <td class='up'>Up</td>
            <td class='up'>Up</td>
        </tr>
    </tbody>
</table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since you used border-collapse on the table, you can achieve what you want by doing this:

    table.status tr:hover td
{
    background-color: #FAF0BD;
}

    ..instead of..

    table.status tr:hover
{
    background-color: #FAF0BD;
}

    I understood your question as you want the tr:hover rules to have priority over the special cells. In this case, in your markup, these are the cells with class="down", correct? Since you’re using border-collapse, the background colors of the <td>‘s blend together within a <tr>. Hope this helps.

    • 0