thead 上的底部边框与 tbody tr 中的边框重叠，表格中的折叠边框答案

【问题标题】：Bottom border on thead overlaps border in tbody tr with collapse border in tablethead 上的底部边框与 tbody tr 中的边框重叠，表格中的折叠边框
【发布时间】：2020-04-03 06:14:56
【问题描述】：

我正在使用 HTML 格式的表格，我想设置一些样式。我在表的thead 中添加了一个bottom-border，并且tbody tr 有一个活动类，它添加了一个边框。
但是，thead 的 bottom-border 与活动类的 border-top 重叠。

这是因为折叠边框，但我需要它，因为 tbody tr 上的悬停无法正常工作。实际上，它会在每列之间增加间隙。

我该如何解决这个问题？

代码如下：

table {
  border-collapse: collapse;
  cursor: default;
}

table thead {
  border-bottom: 2px solid;
  text-align: center;
}

table thead th {
  font-weight: normal;
}

table th,
table td {
  padding: 5px 10px;
}

table tbody tr:hover {
  background-color: grey;
}

table tbody tr.active {
  border: 1px solid blue;
}

<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： html css

【解决方案1】：

最后，我找到了诀窍。我在tbody 中添加了:before，在thead 中添加了box-shadow 而不是border-bottom。

table {
  border-collapse: collapse;
  cursor: default;
}

table thead {
  box-shadow: 0 2px grey;
  text-align: center;
}

table thead th {
  font-weight: normal;
}

table th,
table td {
  padding: 5px 10px;
}

table tbody tr:hover {
  background-color: grey;
}

table tbody tr.active {
  border: 1px solid blue;
}

table tbody:before {
  line-height: 0px;
  content: "\200C";
  display: block;
}

<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
      <td>G</td>
      <td>H</td>
    </tr>
  </tbody>
</table>

【讨论】：