继续将颜色悬停在边框间距上 table

Question

我的 table 有 border-collapse: seperate; 和 border-spacing: 50px 0;。
鼠标悬停时，整行背景都会发生变化。问题是，border-spacing 的空白区域没有改变。
我可以使用 padding 而不是 boeder-spacing，但是我在列上有边框和背景颜色，因此填充不会改变它们，只会使单元格变大。
所以结果必须有单独的单元格和单独的边框，但悬停时整行背景必须相等。



<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: seperate;
  width: 100%;
  border-spacing: 50px 0;
}

th, td {
  padding: 8px;
  text-align: left;
  border-right: 1px solid black;
    border-left: 1px solid black;

}

.second-row {
background: red;
}

tr:hover {background-color: yellow;}
</style>
</head>
<body>

<table>
<colgroup><col><col class="second-row"></colgroup>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>0</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>0</td>
  </tr>
 
</table>

</body>
</html>

fiddle

Answer 1

如果我没理解错的话，我认为您需要在中间列中添加一个 span 或 div 来提供间距，而不是使用 border-spacing 因为悬停时的背景颜色。

  <tr>
    <th>First Name</th>
    <th><span>Last Name</span></th>
    <th>Points</th>
  </tr>

* {
  box-sizing: border-box;
}
table {
  border-collapse: collapse;
  height: 100%;
  width: 100%;
}

th, td {
  padding: 0 8px;
  text-align: left;
  border-right: 1px solid black;
  border-left: 1px solid black;

}

tr:hover {background-color: yellow;}
tr:hover span {background-color: yellow;}

span {
  background: red;
  display: block;
  border-left: 1px solid black;
  border-right: 1px solid black;
  height: 100%;
  padding: 8px;
  margin: 0 20px;
}

https://jsfiddle.net/hdtgomr3/

布局非常相似，但悬停时的背景色可以应用到整行而无需边框间距。

编辑：更新了 link 并向代码片段添加了悬停和填充属性以确保背景颜色在整行中无间隙地更改。

或者，对看起来空的列使用空单元格：https://jsfiddle.net/8uemtj0x/22/

继续将颜色悬停在边框间距上 table

continues hover color over border spacing table

html

css

html-table