Html 如何仅使用部分边框间距设置表格样式？

我想创建一个只有部分分隔边框的表。

thead

上方和下方的边框之间不得有空格。但是其他的应该用一个小空间隔开

不幸的是，

边框间距

样式仅适用于整个表格：

例如，在下面的示例中，我只希望在

h2.1

和

h2.2

的

边框顶部

之间有空格。可能吗

HTML:

小提琴：

编辑

这里有一个更合理的例子

小提琴：

我想让它看起来像一张“书桌”：

---

您可以尝试为头部和身体部位使用两个不同的表格。像这样的

h1
氢
h2.1
h2.2
b1
b2.1
b2.2
b1
b2.1
b2.2

您可以尝试为头部和身体部位使用两个不同的表格。像这样的

h1
氢
h2.1
h2.2
b1
b2.1
b2.2
b1
b2.1
b2.2

谢谢。但是我需要有间距的thead的内部边界，没有间距的外部边界。您的解决方案在头部下方有边框，有间距，但内部没有。抱歉@Daniel我无法获得您的预期输出。你能大致描述一下吗。这将是有益的。我添加了一个更合理的例子与图片。谢谢。但是我需要有间距的thead的内部边界，没有间距的外部边界。您的解决方案在头部下方有边框，有间距，但内部没有。抱歉@Daniel我无法获得您的预期输出。你能大致描述一下吗。这将是有益的。我添加了一个更合理的例子与图片。

<table>
  <thead>
    <tr>
      <th rowspan="2">h1</th>
      <th colspan="2">h2</th>
    </tr>
    <tr>
      <th>h2.1</th>
      <th>h2.2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>b1</td>
      <td>b2.1</td>
      <td>b2.2</td>
    </tr>
    <tr>
      <td>b1</td>
      <td>b2.1</td>
      <td>b2.2</td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: separate;
}

th,
td {
  vertical-align: top;
}

thead tr:first-child th {
  border-top: 2px solid;
}

thead tr:not(:first-child) th {
  border-top: 1px solid;
}

tbody tr:first-child td {
  border-top: 1px solid;
}

tbody tr {
  border-top: 1px solid;
}

        <table id = "table1">
          <thead>
            <tr>
              <th rowspan="2">h1</th>
              <th colspan="2">h2</th>
            </tr>
            <tr>
              <th>h2.1</th>
              <th>h2.2</th>
            </tr>
          </thead>
          </table>
          <table>
          <tbody>
            <tr>
              <td>b1</td>
              <td>b2.1</td>
              <td>b2.2</td>
            </tr>
            <tr>
              <td>b1</td>
              <td>b2.1</td>
              <td>b2.2</td>
            </tr>
          </tbody>
        </table>