Question

我正在尝试使用CSS更改表格行的背景颜色，但我不想更改表格标题的背景。但是，默认情况下，TH包含在TR中，因此TR规则被推送到我的TH。

如果有帮助的话，这里有一个jsfiddle来测试： http://jsfiddle.net/jomanlk/Bcayc/

Answer 1

您可以添加<thead>和<tbody>来区分数据行中的标题行。这样您就可以只定位所需的那些：

table tbody td:hover{
    background: #f00;
}

table tbody tr:hover{
    background: #00f;
}

<强> DEMO

以下标记：

<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Col 1</td>
            <td>Col 2</td>
            <td>Col 3</td>
            <td>Col 4</td>
        </tr>
    </tbody>
</table>

Answer 2

看起来使用thead和tbody发布了最好的方法。

或者，作为一个概念，你可以在header-tr中添加一个类，并定义静态背景颜色，放在.css中的悬停条件之后

table td:hover{
    background: #f00;
}

table td:hover{
    background: #00f;
}

table .nohover:hover{
    background: #fff;   
}

<table>
    <tr class="nohover">
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
    </tr>
        <tr>
        <td>Col 1</td>
        <td>Col 2</td>
        <td>Col 3</td>
        <td>Col 4</td>
    </tr>
</table>

Answer 3

或每隔一行+悬停

tbody tr:nth-child(2n), tbody tr:hover{
    background-color: #e3e3e3;
}

更改行上的背景颜色，但不更改行标题

3 个答案: