如何設計僅具有部分邊框間距的表格？

Question

我想創建一個僅具有部分分隔的邊框的表。 上方和下方的邊框thead應該是沒有之間的空格。 但是其中的其他位置應以較小的空間隔開。

不幸的是， border-spacing樣式僅適用於整個表格： https ： //developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

例如，在下面的內容中，我只希望在h2.1和h2.2的border-top之間h2.1 h2.2 。 那可能嗎？

HTML：

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

CSS：

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

小提琴： https : //jsfiddle.net/6ov4hadd/

編輯

這是一個更明智的例子。

小提琴： https : //jsfiddle.net/Lnk929q4/

我想看起來像一個“書桌”：

Answer 1

您可以嘗試將兩個不同的表用於頭部和身體部位。 像這樣

https://jsfiddle.net/6ov4hadd/1/

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