给td/th加box-shadow必须先设border-collapse: separate并配border-spacing，否则阴影被collapse模式裁剪；需配合position: relative和合理间距（如6px）确保阴影不重叠、不遮挡。
直接给 td 或 th 加 box-shadow 是可行的，但必须先解除边框合并 —— 否则阴影会被 border-collapse: collapse 吞掉，根本看不到。
为什么给 td 加 box-shadow 没反应？
绝大多数表格默认用了 border-collapse: collapse，这会让相邻单元格的边框“挤在一起”，同时也会让 box-shadow 失效或被裁剪。浏览器渲染时，td 的盒模型在 collapse 模式下不独立占位，阴影自然无法正常溢出。
解决办法只有一个：改用 border-collapse: separate，并配合 border-spacing 留出间隙。
-
border-collapse: separate是前提，否则所有单元格阴影都会互相覆盖或消失 -
border-spacing: 4px（或其它值）决定单元格之间的空白距离，这个空隙就是阴影能“伸展”的区域 - 每个
td和th必须设置display: block或position: relative才能确保阴影定位稳定（尤其在旧版 Safari 中）
如何让每个单元格都有独立阴影？
关键不是加多少层样式，而是控制好盒模型层级和间距。下面这段 CSS 能让每个单元格投出清晰、不重叠的阴影：
.cell-shadow-table {
border-collapse: separate;
border-spacing: 6px;
}
.cell-shadow-table th,
.cell-shadow-table td {
position: relative;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background-color: #fff;
padding: 10px 14px;
border: 1px solid #e0e0e0;
}
.cell-shadow-table th {
background-color: #f8f9fa;
}
注意：border-spacing 值要略大于 box-shadow 的垂直偏移 + 模糊半径之和，否则阴影会被相邻单元格遮挡。比如上面用了 6px 间距，而阴影是 0 2px 4px，刚好留出安全余量。
box-shadow 参数怎么调才不糊成一片？
单元格密集时，阴影容易糊在一起，看起来像一块大黑斑。核心是控制扩散（spread）和模糊（blur）：
- 避免用正的
spread-radius（如box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1)），它会让阴影向外膨胀，加剧粘连 - 推荐用
0 1px 3px rgba(0,0,0,0.08)这类轻量组合：垂直偏移小、模糊低、透明度弱，视觉干净且性能友好 - 如果需要 hover 效果，只增强
y-offset和透明度，别加大 blur，否则动画会显得拖沓
移动端适配和性能要注意什么？
在小屏上，border-spacing 会放大表格整体宽度，可能触发横向滚动。更稳妥的做法是：
- 用媒体查询在
max-width: 768px下切回border-collapse: collapse，并改用整表阴影（table上加box-shadow） - 避免对大量单元格（比如 >100 个）逐个加
box-shadow，CSS 渲染压力会上升，低端 Android 设备可能出现卡顿 - 真要支持老版本 iOS（-webkit-box-shadow 前缀，虽然现在基本不用了
最易被忽略的一点：overflow: hidden 不能乱加在 table 上 —— 它会把单元格阴影整个裁掉，哪怕你只给 td 加了 shadow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
