html - 如何仅给thead分配单元格间距？

我想创建一个表格，这样就只在thead部分而不是tbody部分有单元格间距（就像您在使border collapse:separate时得到的那样）。
我可以做两张这样的桌子

table.table1 {
  border-spacing: 10px;
  border-collapse: separate;
  border: solid;
}

table.table1 th {
  border: solid;
}

table.table2 {
  border-spacing: 10px;
  border-collapse: collapse;
  border: solid;
}
table.table2 td {
  border: solid;
}

<table class="table1">
  <thead>
   <tr>
     <th> col1 </th>
     <th> col2 </th>
     <th> col3 </th>
     <th> col4 </th>
   </tr>
  </thead>
</table>

<table class="table2">
  <tbody>
   <tr>
     <td> val1 </td>
     <td> val2 </td>
     <td> val3 </td>
     <td> val4 </td>
   </tr>
   <tr>
     <td> val21 </td>
     <td> val22 </td>
     <td> val23 </td>
     <td> val24 </td>
   </tr>
  </tbody>
</table>

但是宽度可能不匹配，然后我必须编写一个js脚本来匹配宽度，这很乏味，而且我认为这样做的方式不对。
我想要的是这样的东西

请帮忙

最佳答案

使用一个表并将:after设置为每个th以腾出空间

.table1 {
  border-spacing: 10px;
  border-collapse: collapse;
  border: solid;
}

table.table1 th {
  border: solid;
  margin:5px;
      position: relative;
}

table.table1 tr {
  border-bottom: solid;
}
th:after{
    content: '';
    border-right: 5px solid white;
    position: absolute;
    height: 100%;
    border: 2px solid;
    top: -3.5px;
    width: 1.5px;
    background: white;
    border-top-color: white;
    right: -5px;
}
th:last-child:after{
border-right-color: white;
border-bottom-color: white;
right: -6px;
}

<table class="table1">
  <thead>
   <tr>
     <th> col1 </th>
     <th> col2 </th>
     <th> col3 </th>
     <th> col4 </th>
   </tr>
  </thead>
  <tbody>
   <tr>
     <td> val1 </td>
     <td> val2 </td>
     <td> val3 </td>
     <td> val4 </td>
   </tr>
   <tr>
     <td> val21 </td>
     <td> val22 </td>
     <td> val23 </td>
     <td> val24 </td>
   </tr>
  </tbody>
</table>