table单元格padding按content-box计算，width不含padding；百分比padding无效；border-collapse影响边框叠加；box-sizing: border-box仅在table-layout: fixed+显式width时稳定生效；vertical-align与padding共同决定内容对齐。
table单元格的padding计算遵循标准盒模型
td和th元素默认使用box-sizing: content-box，所以设置padding会直接扩大单元格内容区到边框的距离，进而增加整个单元格的视觉尺寸。比如td { width: 100px; padding: 12px; }，实际内容宽度只有76px，但单元格总宽是100px（含左右各12px内边距）。
常见错误是以为width指“可见宽度”，结果在固定表格中出现横向溢出或table-layout: fixed失效。
- padding值支持1–4个参数，顺序为上→右→下→左，例如
padding: 8px 16px 4px;表示上8px、左右16px、下4px - 百分比
padding在表格单元格中**无效**——它不会相对于父table或tr计算，浏览器会忽略或转为0 - 单独方向设置更安全：
padding-left: 20px;比简写容易调试，尤其在合并单元格或响应式表格中
border-collapse影响border与padding的叠加关系
当table { border-collapse: collapse; }时，相邻单元格的边框会合并成一条线，此时border不额外撑开单元格，但padding仍独立生效；而border-collapse: separate（默认）下，每个td的border会完整绘制，左右border + 左右padding + 内容宽 = 单元格实际宽度。
容易踩的坑：在collapse模式下给td加border，却忘了table本身也有border，导致视觉边框变粗一倍。
- 统一控制边框：优先用
table { border: 1px solid #ccc; }，再设td, th { border: none; }，避免重复叠加 - 若需单个单元格突出边框，用
border-left等单向属性，而不是全边框 -
border-collapse: collapse后，padding不再和相邻单元格的border产生间隙，这是它和separate最直观的布局差异
box-sizing对td/th不起作用？其实是起作用的，但有前提
box-sizing: border-box对td和th**有效**，但前提是它们的display不是table-cell的默认行为被覆盖。如果给td加了display: block或flex，那box-sizing就按普通块级元素处理；但保持原生table-cell时，浏览器仍按表格渲染引擎计算尺寸，box-sizing会被部分忽略——尤其是当table-layout: auto时。
真正稳定生效的场景是：table-layout: fixed + 显式设置width + box-sizing: border-box。这时padding和border会被压缩进设定的width内。
- 推荐写法：
td { width: 120px; padding: 10px; border: 1px solid #ddd; box-sizing: border-box; } - 不要依赖
* { box-sizing: border-box; }自动覆盖td——某些旧版浏览器（如IE11）对表格元素的box-sizing支持不一致 - 若用
calc()手动减去padding，例如width: calc(120px - 20px);，必须确保父table用了table-layout: fixed，否则计算会被忽略
表格中padding与文字对齐的实际冲突点
padding本身不改变文字位置，但vertical-align和line-height会和padding共同决定内容在单元格内的视觉居中效果。比如padding-top: 20px + vertical-align: middle，文字会从顶部20px处开始垂直居中，而非从单元格顶部算起。
最容易被忽略的是th默认有bold字体+上下额外间距，即使padding相同，th看起来也比td“更高”。这不是bug，而是浏览器对表头的默认样式干预。
- 统一基线：给
td, th { vertical-align: top; line-height: 1.4; }，再配padding，能更好预测高度 - 避免混用
padding和height：给td设height: 40px又加padding: 12px，内容区只剩16px高，文字可能被截断 - 打印样式中，
padding可能被浏览器缩放或忽略，关键表格建议用min-height兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
