html - 如何只给thead单元格间距？

Question

我想制作一个表格，以便只有在 thead 部分而不是在 tbody 部分。

我可以像这样制作两个表格

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 脚本，这很乏味，我认为这不是正确的方法。

我想要的是这样的

请帮忙

Answer 1

使用一个表并将: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>