table元素默认忽略box-sizing: border-box，必须显式声明table, td, th, caption { box-sizing: border-box; }，因该属性不继承且浏览器对表格元素支持有限；仅靠*全局重置无效。
table元素默认忽略box-sizing: border-box
这是最常被忽略的前提：哪怕你写了 * 全局重置，table、td、th 仍保持 content-box 行为。浏览器规范明确要求表格相关元素的 box-sizing 不受继承影响，且多数引擎（Chrome/Firefox/Safari）对其 border-box 支持有限或不一致。
必须显式声明 table 及其子元素的 box-sizing
仅靠通配符无法覆盖，得单独加规则：
table,
td,
th,
caption {
box-sizing: border-box;
}
注意这几点：
-
caption容易漏掉，但它也是表格渲染链一环，有 padding 时同样会撑开 - 不要只写
table { box-sizing: border-box; }—— 子元素不继承，td仍按content-box算尺寸 - 如果用了
border-collapse: collapse，border会合并，但padding依然独立作用于每个td，必须靠border-box拉回总宽
box-sizing 对 table 无效的典型表现
即使加了 box-sizing: border-box，以下情况仍会撑开：
-
table-layout: auto（默认）下，内容宽度优先，width只是建议值；必须配table-layout: fixed才让width生效 -
td里放input或img时，这些替换元素自身默认content-box，且不继承父td的box-sizing，得单独设input { box-sizing: border-box; } - 百分比宽度（如
width: 100%）在td中计算基准是单元格可用宽度，但若内容过长（如长单词、URL），仍会突破——这时要加word-break: break-word或overflow: hidden
调试时重点检查 computed 值而非声明
打开开发者工具 → Elements → 选中 td → Computed 面板，搜 box-sizing。常见失效原因：
- 第三方 CSS（比如 Bootstrap 表格样式）用更高优先级规则覆盖了你的
box-sizing -
td上有内联样式style="box-sizing: content-box"，直接干掉你的外部规则 - 用了 CSS-in-JS 库动态注入样式，
table相关规则没被正确提升到顶层，导致加载顺序错乱
真正麻烦的不是写不对那几行 CSS，而是表格结构嵌套深、样式来源杂，一个 td 没生效，整行就飘出去了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
