box-sizing: border-box 对原生 <td> <th> <table> 默认不生效，因其受表格布局算法支配而非标准盒模型；可靠解法是用 table-layout: fixed 配合 <col> 宽度或内层 <div> 封装并应用 border-box。
box-sizing: border-box 对 HTML 表格（<table>、<td>、<th>）默认不生效，这是最容易踩的坑。
浏览器对表格元素的盒模型处理有特殊规则：table、td、th 等原生表格元素在绝大多数浏览器中忽略 box-sizing 声明（尤其是 border-box），即使显式设置也常被无视。这不是 bug，而是 CSS 规范和渲染引擎对表格布局的兼容性保留行为。
为什么 box-sizing: border-box 在 <td> 上经常失效
- 表格单元格（
<td>）使用的是 table-layout 渲染逻辑，其尺寸由表格算法（如table-layout: auto或fixed）主导，而非普通块级盒模型。 - 即使你写了
td { box-sizing: border-box; padding: 12px; border: 1px solid #ccc; width: 100px; }，实际渲染宽度仍可能是100px + 24px + 2px = 126px（即按content-box算）。 -
offsetWidth返回的值也反映这个“失控”宽度，无法靠box-sizing统一约束。
如何真正控制表格单元格尺寸（实操建议）
- 直接给
<td>设置box-sizing是徒劳的，应转向以下可靠方式：
- 用
table-layout: fixed配合明确的width（在<col>或<table>上设），让列宽强制固定，再通过padding控制内距 —— 此时padding不会撑宽列，但border仍会计入（需用border-collapse: collapse消除双倍边框） - 把
<td>内容用<div>包一层，对这个<div>应用box-sizing: border-box和尺寸控制，<td>只负责对齐和最小内容包裹 - 彻底放弃原生表格语义，改用
display: table/display: table-cell的 div 结构 —— 这些伪表格元素**完全支持box-sizing: border-box**，且可自由设置
示例（推荐方案）：
<div class="table">
<div class="row">
<div class="cell"><div class="cell-content">数据</div></div>
</div>
</div>
<p><style>
.table { display: table; width: 100%; }
.row { display: table-row; }
.cell { display: table-cell; width: 200px; }
.cell-content {
box-sizing: border-box;
width: 100%;
padding: 8px;
border: 1px solid #ddd;
}
</style>表格相关元素哪些能用 box-sizing: border-box？
- ✅
<caption>、<thead>、<tbody>、<tfoot>（作为块级容器时，可设display: block后生效） - ✅ 所有自定义
display: table-xxx元素（table-cell、table-row等） - ❌ 原生
<table>、<td>、<th>（除非加display: block，但会破坏表格布局）
关键点始终是：表格不是普通盒子，别指望它老老实实听 box-sizing 的话。真要精确控尺寸，要么绕开原生表格，要么只靠 table-layout: fixed + border-collapse + 内层 div 封装。否则，padding 和 border 依然会悄悄撑开列宽，而且毫无预警。
立即学习“前端免费学习笔记（深入）”；
