css - 我怎样才能在表格行上有连续的悬停颜色？

Question

我在我的 asp.net web 应用程序中创建了下表:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: #eeeeea;
  cursor: pointer;
}

<table class='table' style='border-collapse:separate; border-spacing:1em;'>
  <thead>
    <tr>
      <th style='text-align:left'></th>
      <th style='text-align:right'>Pages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>objectives</td>
      <td>3<td>
    </tr>
  </tbody>
</table>

现在，当我将鼠标悬停在表格行上时，会得到以下效果:

表格之间会有白色区域<td>如上所示.. 那么有人可以就此提出建议吗？如何定义在整个表格行上的连续悬停？

我已尝试设置以下内容以更改悬停时的边框颜色，但这没有效果:

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: #eeeeea;
  border-color: #eeeeea;
  cursor: pointer;
}

Answer 1

差距来自border-collapse:separate; border-spacing:1em;在 table 上, 将其更改为 border-collapse:collapse; ，并使用 padding在 th和 td根据需要留出间距。

旁注，您忘记关闭第二个 <td>在标记中。

.table tbody tr:hover td,
.table tbody tr:hover th {
  background-color: pink;
  cursor: pointer;
}

.table th,
.table td {
  padding: 1em;
}

<table class='table' style='border-collapse:collapse;'>
  <thead>
    <tr>
      <th style='text-align:left'></th>
      <th style='text-align:right'>Pages</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>objectives</td>
      <td>3</td>
    </tr>
  </tbody>
</table>