怎样给HTML表格添加阴影效果？CSS样式美化表格视觉层级-html教程-PHP中文网

table 直接加 box-shadow 失效主因是 display: table 盒模型无扩展空间、border-collapse: collapse 消除边框间隙、祖先 overflow: hidden 截断阴影；最稳妥方案是用 div 包裹并设 box-shadow 与 overflow: hidden。

怎样给html表格添加阴影效果？css样式美化表格视觉层级

直接给 `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 的 computed box-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 上，防止圆角处阴影溢出）。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

.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 混用，两者叠加会导致阴影变重、边缘发虚