table 直接加 box-shadow 失效主因是 display: table 盒模型无扩展空间、border-collapse: collapse 消除边框间隙、祖先 overflow: hidden 截断阴影；最稳妥方案是用 div 包裹并设 box-shadow 与 overflow: hidden。
直接给 table 加 box-shadow 为什么经常失效？
不是你写错了，是浏览器默认渲染行为导致的：table 默认为 display: table，其盒模型边界紧贴内容，且常配合 border-collapse: collapse，阴影没有“落脚空间”。DevTools 里能看到 box-shadow 声明存在，但 computed 样式中往往被裁掉或压根不绘制。
关键干扰点有三个：border-collapse: collapse 会让表格外边框模糊；父容器没设 overflow: visible（多数默认是 visible，但若祖先设了 hidden 就会截断）；table 自身无 padding 或 margin 扩展渲染区域。
- 用 DevTools 检查
table的 computedbox-shadow、border-collapse和最近一个非visible的overflow父级 - 临时加
background: #eee和padding: 10px到table上，看阴影是否突然出现——能出现就说明是尺寸/溢出问题 - 别在
table上硬扛border-radius+box-shadow，圆角和阴影不同步时边缘会撕裂
最稳妥：用 div 包裹 table 并加阴影
这是兼容性最好、可控性最强的方案，绕过 table 渲染限制，同时保留语义结构。阴影真正作用在块级容器上，不受内部单元格撑开影响。
必须配对设置：border-collapse: separate（否则 border-spacing 无效，且表格外轮廓不清晰），overflow: hidden（加在 div 上，防止圆角处阴影溢出）。
立即学习“前端免费学习笔记（深入）”；
.table-wrapper { box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; }.table-wrapper table { width: 100%; border-collapse: separate; border-spacing: 0; }- 如果表格内容宽度固定，建议给
.table-wrapper设width: fit-content或具体值，避免阴影横向拉伸失真 - 不要给
table设margin来“腾空间”，那只是视觉错觉，阴影仍可能被裁
想让阴影从 table 本体“发出来”？试试 outline + filter: drop-shadow()
极少数场景下不能多套一层 DOM（比如 CMS 输出受限、微前端子应用隔离），可用这个轻量伪方案模拟：不用额外标签，视觉上更贴近“表格自身投射”。
原理是用 outline 拉出一个透明描边作为投影锚点，再用 filter 基于该轮廓生成阴影。注意 filter 性能开销略高，慎用于滚动区域或高频重绘表格。
table { outline: 2px solid transparent; outline-offset: 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1)); }-
outline-offset决定阴影离表格边缘的距离，调大则阴影更“飘”；drop-shadow()不支持inset，也不接受spread参数 - 此方案在 Safari 中兼容性稍弱，若需全平台稳定，仍推荐 div 包裹法
- 避免和
box-shadow混用，两者叠加会导致阴影变重、边缘发虚
给每个 td 和 th 单独加阴影行不行？
可以，但代价明显：大量重复渲染、性能下降、响应式适配复杂。适合小表格或强调单元格独立性的设计（如数据卡片式表格），不适合常规数据列表。
必须设 border-collapse: separate 并配合 border-spacing，否则单元格紧贴，阴影会互相覆盖或重叠成一团黑。
th, td { box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 12px; }-
table { border-collapse: separate; border-spacing: 0 1px; }（垂直间距 1px，留出阴影空间） - 单元格需有明确背景色（哪怕
background: white），否则透明背景下阴影不可见 - hover 时加大单个单元格阴影要谨慎——DOM 更新频繁，容易卡顿
border-collapse 和 overflow 的组合细节里，而不是阴影参数本身。多一层 DOM 是冗余，但比调试半天不见影强。 
