如何仅给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>

Answer 2

看看下面的代码片段，我使用before来获得所需的布局。

table {
  border-spacing: 10px;
  border-collapse: collapse;
  border-bottom: 1px solid;
  
}

thead th{
  position:relative;
  padding:10px 20px;
}

tbody td{
  padding: 10px 20px;
  text-align:center
}
thead th:before {
    content: "";
    position: absolute;
    width: calc(100% - 5px);
    height: 100%;
    background: #fff;
    z-index: -1;
    margin: -10px -20px;
    border: 1px solid;
    box-sizing: border-box;
    border-bottom: none;
  
}
thead th:last-child:before {
 
  width:calc(100% + 1px);
  
}


tbody tr {
  border: 1px solid;
  border-bottom:none
  
}

<table class="table1"  >
  <thead>
   <tr> 
     <th> col1col1col1col1col1col1 </th>
     <th> col2col2 </th>
     <th> col3col3col3col3col3col3 </th>
     <th> col4col4col4 </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>

Answer 3

在div内使用th的另一种方法

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  position: relative;
  padding: 0;
}

tr {
  border-width: 1px;
  border-color: #000;
  border-bottom-style: solid;
}

tbody tr {
  border-left-style: solid;
  border-right-style: solid;
}

th > div {
  border-width: 1px 1px 0 1px;
  border-style: solid;
  margin-right: 15px;
  text-align: center;
}

th:first-child  > div {
  margin-left: 0;
}

th:last-child > div {
  margin-right: -1px;
}

<table>
  <thead>
    <tr>
      <th>
        <div>
          col1
        </div>
      </th>
      <th>
        <div>
          col2
        </div>
      </th>
      <th>
        <div>
          col3
        </div>
      </th>
      <th>
        <div>
          col4
        </div>
      </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>

Answer 4

尝试一下

thead tr {
      border-right: 5px solid white;
    }

这也很有用，Spacing between thead and tbody

Answer 5

不是最好的方法，但是，您去了。

th:nth-child(odd)
{
   border: 1px solid #000;
}

td
{
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   text-align: center;
}

td:first-child
{
   border-left: 1px solid #000;
}

td:last-child
{
   border-right: 1px solid #000;
}

table
{
    border: none;
    border-collapse: collapse;
    padding: 0;
    margin: 0;

}

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

 
   </tr>
  </thead>
  <tbody>
   <tr> 
     <td> val1 </td>
     <td> &nbsp; </td>
     <td> val2 </td>
     <td> &nbsp; </td>
     <td> val3 </td>
     <td> &nbsp; </td>
     <td> val4 </td>     
   </tr>
   <tr> 
     <td> val21 </td>
     <td> &nbsp; </td>
     <td> val22 </td>
     <td> &nbsp; </td>
     <td> val23 </td>
     <td> &nbsp; </td>
     <td> val24 </td>     
   </tr>
  </tbody>
</table>