如何给HTML表格添加内阴影？CSS样式增强单元格质感-html教程-PHP中文网

table元素无法直接应用inset阴影，因其display: table盒模型无内边距空间且border-collapse: collapse会消除阴影落脚点；应将inset阴影应用于td/th并设置足够padding，或用外层div包裹表格配合外阴影实现嵌入感。

如何给html表格添加内阴影？css样式增强单元格质感

box-shadow 的 inset 关键字确实能给表格加内阴影，但直接写在

<table> 上基本无效——不是语法错，是浏览器渲染机制决定的。

<h3>为什么 <code>table

元素加 inset 阴影没反应？

表格默认是 display: table，其盒模型不响应 inset 阴影：内部单元格会撑满内容区域，没有“内边距空间”供阴影落脚；border-collapse: collapse 更会让整个表格边界紧贴内容，inset 阴影无处可画。
用 DevTools 检查 computed 样式，常会发现 box-shadow 值存在，但渲染层根本没输出。

真正生效的内阴影方案：作用于 `td` 或 `th`

把内阴影下放到单元格级，才能看到效果。关键是让每个单元格有独立的“内凹”视觉感，而不是强求整张表有统一内阴影：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

td, th 必须设 padding（至少 8px），否则 inset 阴影会被压扁到看不见
推荐写法：box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); —— 轻微向下偏移，模拟顶部受光、底部微暗的质感
避免用 inset 0 0 10px ... 这种全向模糊，它在单元格里容易糊成一片灰，失去层次
若需强化立体感，可配合 background: linear-gradient(to bottom, #fff, #f9f9f9); 模拟高光过渡

想让整张表看起来“嵌入背景”？别硬套 `inset`

这不是语义错误，而是设计目标错位。用户感知的“嵌入感”，往往来自外层容器 + 边框 + 阴影组合，而非真正的内阴影：

用 <div class="table-embed"><table>...</table></div> 包裹表格
给 .table-embed 加 border: 1px solid #e0e0e0 和 box-shadow: 0 1px 3px rgba(0,0,0,0.05)
再设 table { border-collapse: separate; border-spacing: 0; }，确保边框不被合并干扰视觉节奏
这个组合比强行给 <table> 加 <code>inset 更稳定、更可控，且兼容所有现代浏览器真正难的不是写对那行 box-shadow: inset ...，而是意识到：表格不是卡片，它的语义和渲染约束决定了“内阴影”必须拆解到单元格层级，或干脆换一种视觉表达方式。强行统一应用，反而掩盖了数据本身的清晰结构。