如何为<thead>添加左右外边距，使其宽度小于<tbody>？

要实现<thead>左右各8px外边距、<tbody>无间距的效果，你可以通过伪元素模拟thead背景的方式来实现——因为table内部元素（thead、tr）无法直接使用margin属性调整间距。以下是修改后的代码：

CSS 代码 #

table {
  border-spacing: 0; /* 替换border-collapse: collapse，保证单元格间距为0 */
  width: fit-content; /* 让表格宽度自适应内容，如需占满容器可改为100% */
}

thead tr {
  position: relative; /* 为伪元素提供定位基准 */
}

/* 用伪元素创建thead的背景，实现左右缩进8px的效果 */
thead tr::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 8px;
  right: 8px;
  background-color: #ddd;
  z-index: -1; /* 让背景位于文字下方，不遮挡内容 */
}

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

th,
td {
  width: 100px;
  padding: 10px;
  text-align: start;
}

HTML 代码（无需修改） #

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>20</td>
    </tr>
    <tr>
      <td>Sam</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

原理说明 #

• 之前尝试直接给<thead>或<th>加margin无效的原因：<thead>、<tr>属于table内部的结构元素，margin属性对它们不生效；而border-collapse: collapse模式下，单元格的margin、padding会被合并，无法单独调整thead的宽度。
• 改用border-spacing: 0保持单元格无间距，通过伪元素模拟thead的背景区域，利用left:8px和right:8px让背景比表格整体窄16px，从而实现thead看起来更窄的视觉效果。

内容的提问来源于stack exchange，提问作者TSinC