表格单元格盒模型表现异于div，根本原因是强制参与表格布局算法，会覆盖width、height、padding等样式；需用table-layout:fixed才能使width生效，td的height影响整行，min/max-height无效，padding受border-collapse影响。
表格单元格（td、th）的盒模型表现和普通 div 不同，根本原因不是它“不遵守盒模型”，而是它被强制参与了表格布局算法——这个算法会覆盖你写的 width、height、padding 甚至 box-sizing，优先按表格整体结构重新分配空间。
table-layout: auto 会无视你设的 width
默认情况下，table 使用 table-layout: auto，浏览器会先扫描所有单元格内容，再根据最长文本、最大图片等“撑开”列宽。此时你给 td 写的 width: 100px 只是“建议值”，很可能被忽略。
-
width在auto模式下只起最小宽度作用，不是固定尺寸 - 即使设置了
box-sizing: border-box，padding 和 border 仍可能被压缩或外溢，因为表格算法优先保证列对齐 - 想让
width生效，必须显式声明table-layout: fixed，且最好在table元素上设置
td 的 padding 行为在不同浏览器中不一致
td 的 padding 看似正常，但实际渲染时容易受表格边框合并（border-collapse）影响。当 border-collapse: collapse 时，相邻单元格的 padding 不会叠加，甚至可能被边框“吃掉”一部分。
-
border-collapse: collapse下，td的左右padding仍生效，但上下padding在某些 Chrome 版本中会被视觉压缩（尤其配合line-height小于内容高度时） -
border-collapse: separate下，padding表现更接近div，但需额外处理border-spacing，否则间隙不可控 - Firefox 对
td的padding-top渲染更“诚实”，而 Safari 可能因字体度量差异导致垂直居中偏移
height 计算逻辑完全不同
div 的 height 是 content 区域目标高度（受 box-sizing 控制），而 td 的 height 是整行的“分配高度基准”。一旦某行中某个 td 设了 height，整行高度就以此为准，其他单元格内容会被拉伸或截断来适配。
- 给一个
td设height: 40px，若其内容需要 48px 才能完整显示，该行仍会被撑高到 48px（除非加overflow: hidden） -
min-height在td上基本无效；max-height完全不生效——表格布局不支持垂直方向的弹性约束 - 想精确控制单个单元格高度，唯一可靠方式是用
line-height+vertical-align配合固定字号，而不是依赖height
真正麻烦的地方在于：这些行为不是 bug，而是 CSS Table Layout 规范明确规定的。你没法靠重置 UA 样式或全局 box-sizing 拉平，必须在表格上下文里按它的规则做事——比如优先用 table-layout: fixed、避免混用 height 和 line-height、把 padding 当作“内容呼吸区”而非布局工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
