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

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

Answer 2

尝试给行本身着色，并使单元格透明。

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