table元素不支持box-shadow直接生效，因其display:table的盒模型特性导致阴影被裁剪；最稳妥方案是用div包裹table并添加阴影，同时设置border-collapse:separate和overflow:hidden。
table 元素本身不支持 box-shadow 直接生效（尤其在 Chrome/Firefox 中），不是你写错了，是默认渲染行为导致的阴影被“裁掉”或“不显示”。
为什么直接给 table 加 box-shadow 没反应？
因为 table 默认是 display: table，其盒模型行为特殊：边框合并（border-collapse: collapse）、内部单元格撑开容器、且父容器（如 div）未设 overflow: visible 时，阴影常被裁剪。更关键的是，box-shadow 作用于元素的“边界框”，而 table 的边界框常紧贴内容，没有额外 padding 或脱离文档流的空间来展示阴影。
- 常见错误现象：
box-shadow: 0 2px 8px rgba(0,0,0,0.15)写了但完全看不见 - 检查元素：用浏览器 DevTools 选中
table，看 computed 样式里box-shadow是否存在，再看overflow和border-collapse值 - 真正起作用的，往往是包裹
table的外层div，而不是table自身
最稳妥的写法：用 div 包一层再加阴影
这是兼容性最好、可控性最强的方式，绕过 table 渲染限制，同时保留语义结构。
<div class="table-shadow"> <table><tr> <td>A</td> <td>B</td> </tr></table> </div>
对应 CSS：
.table-shadow {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border-radius: 8px; /* 配合阴影更自然 */
overflow: hidden; /* 防止圆角内阴影溢出 */
}
.table-shadow table {
width: 100%;
border-collapse: separate; /* 关键：避免合并边框干扰阴影轮廓 */
border-spacing: 0; /* 可选，配合圆角时更干净 */
}
- 必须设
border-collapse: separate，否则border-spacing无效，且table边界模糊，阴影边缘易发虚 -
overflow: hidden要加在div上，不是table上；否则圆角+阴影会被裁掉 - 如果表格有固定宽度，
div宽度建议显式设置（如width: fit-content或具体值），避免阴影被拉宽失真
想让阴影“贴着表格边缘”？试试 outline + transform 伪方案
极少数场景需要视觉上“阴影从 table 本体发出”，又不想多套一层 DOM，可用 outline 模拟（非标准但轻量）：
table {
outline: 2px solid transparent;
outline-offset: 4px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}
-
outline不占布局空间，outline-offset控制“偏移距离”，配合filter: drop-shadow()可模拟阴影 - 注意：
filter会触发重绘，大量表格时影响性能；且 IE 不支持drop-shadow - 该方式无法实现内阴影（
inset），也不支持border-radius平滑过渡
移动端适配和性能提醒
阴影在低端 Android 设备或 WebView 中容易糊、卡顿，尤其配合 border-radius 和 overflow: hidden 时。
- 避免在
table上叠加多个box-shadow或复杂filter - 用
will-change: transform对包裹div提前声明（仅当需动画时），否则反而降低性能 - 真要响应式：阴影尺寸用
rem或em，别用固定px；比如box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.1)
最复杂的其实是“带圆角的表格阴影在 Safari 下偶尔闪烁”，根源是 backface-visibility 和硬件加速冲突——这种时候，老老实实加一层 div 并设 transform: translateZ(0)，比折腾 table 本身靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
