部分的な枠線の間隔だけで表をスタイルする方法は？

Question

部分的に区切られた罫線だけで表を作成したいと考えています。 theadの上と下の境界線にはスペースを入れないでください。しかし、その中の他のものは小さな空間で分けられるべきです。

は残念ながら、border-spacingスタイルが唯一のテーブル全体に適用されます。たとえばhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

を、次のように私はh2.1のborder-topと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

あなたは頭部と体部に2つの異なるテーブルを使用して試すことができます。この

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>