如何设置只有部分边框间距的表格？

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>