如何让table中td的box-shadow不影响相邻td？

问题说明 #

你当前使用以下代码为表格td设置阴影样式：

<style>
td{
  padding:30px;
  box-shadow: 0 0 5px 5px lightgray;
}
</style>
<table>
  <tr>
    <td>1</td><td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>  
</table>

但相邻td的阴影会互相重叠，需求是实现每个td的阴影独立，不影响相邻单元格。

可行解决方法 #

用伪元素实现独立阴影是最贴合需求的方案，不会改变原表格布局，代码调整如下：

<style>
td {
  padding: 30px;
  position: relative; /* 为伪元素提供定位基准 */
}

td::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 5px 5px lightgray;
  z-index: -1; /* 将阴影置于td内容下方，不遮挡文字 */
}
</style>
<table>
  <tr>
    <td>1</td><td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>  
</table>

原理说明 #

• 给td设置position: relative，让伪元素可以完全贴合td的边界进行绝对定位；
• 将阴影效果放在伪元素上，相当于每个td内部单独生成一个阴影层，相邻td的阴影区域不会交叉重叠；
• z-index: -1确保阴影不会覆盖td内的文字内容，视觉效果和直接给td加阴影一致，但解决了重叠问题。

如果尝试通过拉开td间距来避免阴影重叠，需要给表格添加border-collapse: separate和border-spacing属性，但这种方法会改变原表格的紧凑布局，不如伪元素方案灵活。

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