html - 仅将边框间距应用于表体行

Question

我有一个包含 2 个标题行和多个正文行的表格。我希望正文中行之间的间距为 10 像素。我通过以下方式实现这一目标:

border-collapse: separate;
border-spacing: 10px;

然而，这显然也适用于标题中的行。但是对于页眉，我希望行与行之间没有空格。我的 HTML 是:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
  border-spacing: 10px;
}

<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>

fiddle 是here .我希望第一个标题行的底部和第二个标题行的顶部之间没有空格。我已经尝试将 border-spacing 应用于正文，但它只适用于表格级别。有什么想法吗？

Answer 1

border-spacing 应用于 table elements并且不能单独针对 tbody 但您可以尝试下面的 CSS hack 并将 border: white 应用于 td 元素以创建边距效果。

附加代码:

table td {
  border: 10px solid white;
  border-right: 0;
  border-left: 0;
}

输出:

table td {
  background-color: lime;
  padding: 12px 12px 12px 12px;
  border: 10px solid white;
  border-right: 0;
  border-left: 0;
}
table th {
  background-color: red;
  padding: 12px 12px 12px 12px;
}
table {
  border-collapse: separate;
}

<table>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 1</th>
      <th>head 1</th>
    </tr>
    <tr>
      <th>head 2</th>
      <th>head 2</th>
      <th>head 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
</table>