表格中padding“失效”是因table-layout:fixed下内容不换行挤压所致，需同时设置table-layout:fixed、width:100%、box-sizing:border-box及word-break:break-word。
直接加 box-sizing: border-box 不够，表格单元格（td、th）在 table-layout: fixed 下会“吃掉” padding，必须配合列宽控制和内容换行策略才能真正稳住。
为什么 padding 在表格里看起来“失效”了
不是没生效，是被视觉截断了。当 table-layout: fixed 启用后，列宽被硬性锁定，而单元格内长文本（比如 URL、无空格字符串）又拒绝换行，就会把 padding 区域强行挤压甚至覆盖——你在开发者工具里能看到 computed padding 值是对的，但渲染区域被内容顶到了边框上。
- 检查是否误用了
white-space: nowrap或overflow: hidden，它们会阻止换行，加剧挤压 -
td默认是display: table-cell，它的盒模型对box-sizing的响应不如块级元素直接，必须显式声明 - 如果父
table没设明确宽度（如width: 100%），fixed模式可能退化为auto，导致列宽浮动，padding 表现不稳定
必须同时设置的三项 CSS 规则
单靠一个属性解决不了，这三者要一起上：
- 给
table设table-layout: fixed和width: 100% - 给
td、th显式写box-sizing: border-box（不能只靠全局通配符，table-cell元素有时会忽略继承） - 加
word-break: break-word或overflow-wrap: break-word，让长内容主动折行，给 padding 留出可视空间
table {
table-layout: fixed;
width: 100%;
}
td, th {
box-sizing: border-box;
padding: 8px 12px;
word-break: break-word;
}
col 元素比第一行 td 更可靠地定义列宽
很多人靠第一行 td 的 width 属性定列宽，但动态渲染或 JS 插入数据时容易失效。用 <col> 是更稳定的方案，它在 DOM 解析早期就参与布局计算：
立即学习“前端免费学习笔记（深入）”；
-
<col>的width优先级高于td的width，且不受内容影响 - 配合
max-width+overflow: hidden+text-overflow: ellipsis可安全处理单行标题类单元格 - 避免给
td写width，否则和col冲突，浏览器行为不一致
<table>
<colgroup>
<col style="width: 120px">
<col style="width: 200px">
<col> <!-- 剩余列均分剩余空间 -->
</colgroup>
<tr><th>ID</th><th>名称</th><th>描述</th></tr>
</table>调试时最容易漏掉的两个点
就算上面都写了，还是撑开？先盯住这两处：
- 检查
td里是否嵌套了div、span等元素，它们默认仍是content-box，会从单元格内部再次撑开 —— 对这些内嵌元素也加box-sizing: border-box - 确认没有全局重置样式（比如某些 UI 库）把
table或td的display改成了block或inline-table，这会让table-layout失效
真要快速验证，临时把 td 改成 display: block 看 padding 是否正常——这只是调试手段，别上线。
