如何設置只有部分邊框間距的表格？

Question

我想創建一個只有部分分離邊界的表格。 thead上方和下方的邊框之間應該沒有空格。但其他人應該分開一個小空間。

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

例如，我想有隻h2.1和h2.2的border-top之間的間隔以下。那可能嗎？

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>