如何删除thead和tbody之间的缩进？

问题描述

有实际代码示例。

我对 thead 和 tbody 之间的多余空间有疑问。

我需要保存“初始”顶部高度。有没有一种方法/技巧可以不在所有行上应用边框间距？

table {
  border-collapse: separate;
  border-spacing: 0 40px;
}

<table>
  <thead>
    <tr>
      <th>title</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>item 0</td>
    </tr>
    
    <tr>
      <td>item 1</td>
    </tr>
  </tbody>
</table>

解决方法

如果我理解你想消除左边空格的问题，它存在是因为文本在中心对齐，较短它不会到达边距。测试：

table {
  border-collapse: separate;
  border-spacing: 0 40px;
}
th { 
  text-align: left;
}

<table>
  <thead>
    <tr>
      <th>title</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>item 0</td>
    </tr>
    
    <tr>
      <td>item 1</td>
    </tr>
  </tbody>
</table>