box-sizing对table及td/th元素基本无效，因表格布局算法优先级高于盒模型，浏览器忽略其声明；应改用table-layout:fixed、border-collapse:collapse及显式border控制尺寸。

box-sizing 对 table 元素无效，不是你写错了，是浏览器故意这么设计的。

元素及其子元素（tr、td、th）在绝大多数浏览器中**忽略 box-sizing 声明**，哪怕你写了 box-sizing: border-box，它也不会按 border-box 方式计算宽高。

---

table 的 box-sizing 为什么基本无效？

• 表格布局算法优先级高于 box-sizing：浏览器用表格内部的自动分配逻辑（比如按内容撑开、列宽均分、table-layout: fixed 等）决定尺寸，width 和 border 不参与传统盒模型约束。
• box-sizing: border-box 在 table 上几乎不生效：即使设了，padding 和 border 仍会额外撑出容器，总宽度大概率超 width 值。
• box-sizing: content-box 是唯一“能被识别”的值，但只是被动匹配默认行为，并非真正受控——它只是不报错、不报 warning，不代表你获得了可预测的尺寸控制。

---

table 子元素（td/th）能用 box-sizing 吗？

不能依赖。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• td 和 th 的尺寸由表格布局引擎统一调度，box-sizing 设置会被忽略或部分降级处理。
• 实测中，Chrome、Firefox、Safari 对 td 设 box-sizing: border-box 后，padding 依然外扩，width 仍只作用于内容区。
• 即使配合 table-layout: fixed，td 的 width 也只作为参考值，最终尺寸仍可能被内容顶开（除非加 overflow: hidden 或 white-space: nowrap）。

---

如何让表格尺寸更可控？

• 用 table-layout: fixed 强制列宽按 col 或 th/td 的 width 定义，这是比 box-sizing 更有效的控制手段。
• 给 td、th 显式设 max-width + overflow: hidden 防止内容撑开。
• 避免对 table 或 tr 设 padding / border —— 改用 border-collapse: collapse + border 在 td 上，再配 box-sizing: content-box（仅作语义对齐，不指望它真起作用）。
• 如果需要精确尺寸控制，考虑用 display: grid 或 display: flex 模拟表格结构，它们完全尊重 box-sizing: border-box。

---

真正麻烦的不是写错样式，而是误以为 box-sizing 能像在 div 上那样工作。表格布局走的是另一套规则，强行套用通用盒模型只会增加调试时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！