CSS 表格交替行颜色和悬停颜色

Question

<分区>

Answer 1

如果您已经将表格的背景色设置为白色，则只需设置交替行和悬停背景，如下所示:

.table tr {
    transition: background 0.2s ease-in;
}

.table tr:nth-child(odd) {
    background: silver;
}

.table tr:hover {
    background: silver;
    cursor: pointer;
}

此外，您可能不需要在每一行上重复 table 类，FWIW。您可以像我一样使用 .table tr 定位这些行。如果您试图确保表头和正文样式不会相互干扰，将这些元素包装在 thead 和 tbody:

<table class='table'>
  <thead>
    <tr>
      <th>heading</th>
      <th>heading 2</th>
      <th>heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col 1</td>
      <td>col 2</td>
      <td>col 3</td>
    </tr>
    <tr>
      <td>col 1</td>
      <td>col 2</td>
      <td>col 3</td>
    </tr>
    <tr>
      <td>col 1</td>
      <td>col 2</td>
      <td>col 3</td>
    </tr>
  </tbody>
</table>