如何在表格行上连续悬停颜色？

Question

我在asp.net Web应用程序中创建了下表：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在，当我将鼠标悬停在表格行上时，会产生以下效果：

如上所示，<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>。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试将行自己着色，并使单元格透明。

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