HTML表格如何设置阴影效果-html教程-PHP中文网

table直接加box-shadow大概率失效，因display:table盒模型无延展空间、border-collapse:collapse模糊外轮廓、祖先overflow:hidden裁剪阴影；应改用div包裹并设box-shadow、border-radius、overflow:hidden及border-collapse:separate。

html表格如何设置阴影效果

table 直接加 box-shadow 大概率没反应——不是你写错了，是浏览器对 table 的盒模型渲染不支持直接投射阴影。

为什么 `table` 上的 `box-shadow` 经常失效

根本原因是 table 默认为 display: table，它的盒边界紧贴内容，没有“向外延展”的空间；再加上常见配置 border-collapse: collapse 会让外轮廓模糊，box-shadow 找不到清晰锚点。DevTools 里能看到样式声明存在，但 computed 值中常为空或被裁掉。

父容器设置了 overflow: hidden（哪怕只是某层祖先），阴影会被直接截断
border-radius 单独加在 table 上无效，必须配 overflow: hidden 才能生效，而这个 overflow 又会把阴影剪掉
临时加 padding: 10px 或 background: #eee 到 table 上，如果阴影突然出现，就坐实了是尺寸/溢出问题

最稳妥：用 `div` 包裹并设 `box-shadow`

这是兼容性最好、可控性最强的方案，绕过 table 渲染限制，同时保留语义结构。阴影真正作用在块级容器上，不受内部单元格撑开影响。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

.table-wrapper 必须设 overflow: hidden（否则圆角+阴影会溢出）
.table-wrapper 设 border-radius，table 自身不用设
table 必须用 border-collapse: separate + border-spacing: 0，否则外轮廓不清、阴影边缘发虚
宽度建议用 width: fit-content 或显式值（如 600px），避免阴影横向拉伸失真

.table-wrapper {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.table-wrapper table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

只想加底部阴影？控制 `spread-radius` 是关键

纯 CSS 没有 bottom-shadow，但可以用参数组合模拟：垂直偏移为正、水平偏移为 0、用负的 spread-radius 收窄左右发散，让阴影“钉”在下方。

推荐写法：box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.1)
-2px 是重点：它向内收缩阴影宽度，防止左右“晕开”盖住边框
别用 inset——那是内阴影，方向反了
多层阴影注意顺序：逗号分隔，从左到右由远及近绘制，比如 0 12px 36px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.08)

行悬停阴影不能直接写在 `tr` 上

<tr> 不支持 <code>box-shadow，必须落到可渲染盒模型的元素上，最常用的是 td 和 th。

给 td/th 加 position: relative，再用 :hover 触发 box-shadow
若表格用了 border-collapse: collapse，阴影易被裁，此时要么改用 separate，要么确保包裹容器没设 overflow: hidden
阴影值建议轻量：box-shadow: 0 1px 3px rgba(0,0,0,0.08)，避免多列叠加过重
IE10 及以下不支持 td 上的 box-shadow，需降级为背景色+边框模拟