table元素不支持inset阴影，需用外层div容器实现；单元格加阴影应避免重叠和性能问题，hover时启用更合理；outline+filter可模拟内发光但兼容性差。
直接给 table 加 inset 阴影行不通
你试过写 box-shadow: inset 0 0 8px rgba(0,0,0,0.1); 却发现表格没变化？这不是你的 CSS 写错了，而是 table 元素天生不支持 inset 阴影生效——浏览器会忽略它。原因在于 table 的渲染模型和边框合并机制（border-collapse）导致内阴影无法正确投射到内容区域内部。
inset 阴影必须套在容器上，不是 table 本身
真正能用 inset 的是包裹 table 的外层元素，比如 <div>。这个容器得满足三个条件：
- 设
position: relative或overflow: visible（避免被父级裁剪） - 有明确的
padding（否则内阴影会压住表格边框或文字） - 宽度/高度不能依赖
table自动撑开（建议显式设width: fit-content或固定值）
示例：
div.table-container {
padding: 12px;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
width: fit-content;
margin: 0 auto;
}
div.table-container table {
border-collapse: separate;
border-spacing: 0;
}
单元格（td/th）加阴影要防重叠和性能问题
给每个单元格加 box-shadow 看起来很酷，但容易踩两个坑：
立即学习“前端免费学习笔记（深入）”；
- 相邻单元格阴影互相覆盖，导致边缘虚化或颜色叠加变深；解决办法是只加单边阴影 + 负扩散：
box-shadow: 0 1px 2px -1px rgba(0,0,0,0.1); - 上百行表格里每个
td都渲染阴影，滚动时可能卡顿；建议仅对 hover 状态启用：td:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.15); } - 别用
inset给单元格加“凹陷感”——它会让文字贴着阴影边缘，视觉脏乱；改用background+border-bottom模拟更轻量
替代方案：用 outline + filter: drop-shadow() 模拟内发光
如果非要让表格“自己发出内阴影感”，又不想多套一层 div，可以试试这个非标准但实用的组合：
table {
outline: 1px solid transparent;
outline-offset: -2px;
filter: drop-shadow(0 0 4px rgba(0,0,0,0.1));
}
注意点：
-
outline-offset必须为负值，才能把阴影往里拉 -
filter: drop-shadow()不受overflow: hidden影响，但会强制触发 GPU 渲染，低端设备慎用 - 该方案不兼容 IE，且无法控制模糊方向（只能全向）
真正难的不是写对那行 box-shadow，而是判断阴影该属于谁、该往哪“落”、以及用户滚动时会不会卡——这些细节一漏，视觉效果就垮一半。
