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>。这个容器得满足三个条件： <ul> <li>设 <code>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 看起来很酷，但容易踩两个坑：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 相邻单元格阴影互相覆盖，导致边缘虚化或颜色叠加变深；解决办法是只加单边阴影 + 负扩散： 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，而是判断阴影该属于谁、该往哪“落”、以及用户滚动时会不会卡——这些细节一漏，视觉效果就垮一半。