Как стиль таблицы с только отграниченным интервалом?

Question

Я хочу создать таблицу с частично разделенными границами. Границы выше и ниже thead должны быть без пробелов между ними. Но другие в ней должны быть отделены небольшим пространством.

К сожалению, border-spacing стиль применяется только ко всей таблице: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

Например, в следующем я хочу иметь место только между 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; 
} 

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

Редактировать

Вот более разумный пример.

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