HTML表格行间距与行阴影异常：阴影覆盖单元格问题求助

问题原因 #

阴影覆盖下方行内容的核心原因是：

• 表格行之间没有足够的垂直间距，导致阴影直接渗透到下方行的空间
• 阴影伪元素的扩散范围过大，且绑定在单元格内的div上，容易与相邻单元格的内容重叠
• 表格单元格默认处于同一堆叠上下文，z-index无法有效隔离阴影与下方内容

修正方案 #

通过调整表格间距、将阴影绑定到整行并优化阴影参数，实现行间距与阴影的正确显示：

修正后的CSS代码

table {
  border-collapse: separate;
  border-spacing: 0 12px; /* 垂直间距为阴影预留空间 */
  width: 100%;
}

td, th {
  min-width: 170px;
  padding: 8px;
}

tbody tr {
  position: relative;
}

/* 为每行添加底部阴影 */
tbody tr::after {
  content: "";
  position: absolute;
  bottom: -6px; /* 将阴影定位到行的下方 */
  left: 0;
  right: 0;
  height: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* 优化阴影参数避免过度扩散 */
  z-index: -1; /* 确保阴影在内容下方 */
}

/* 为单元格添加背景，防止阴影透过 */
tbody td {
  background-color: #ffffff;
}

修正后的HTML代码

<main>
  <table>
    <thead>
      <tr>
        <td>head</td>
        <td>head</td>
        <td>head</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>div</td>
        <td>div</td>
        <td>div</td>
      </tr>
      <tr>
        <td>div</td>
        <td>div</td>
        <td>div</td>
      </tr>
      <tr>
        <td>div</td>
        <td>div</td>
        <td>div</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>foot</td>
        <td>foot</td>
        <td>foot</td>
      </tr>
    </tfoot>
  </table>
</main>

方案说明 #

1. 垂直间距设置：border-spacing: 0 12px 为行与行之间添加垂直空隙，确保阴影不会覆盖下方行内容
2. 整行阴影绑定：将阴影伪元素绑定到tbody tr，实现整行宽度的统一阴影效果
3. 阴影定位优化：通过bottom: -6px将阴影精准定位到行的下方，避免干扰当前行内容
4. 背景隔离：为单元格添加白色背景，防止阴影透过单元格显示
5. 堆叠层级控制：z-index: -1确保阴影始终在内容下方，不会遮挡任何表格数据

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