根本解法是同时设置 table { border-collapse: collapse; } 和 td, th { box-sizing: border-box; padding: 12px; }，否则 padding 因分离边框或 content-box 盒模型被掩盖。
别用 cellpadding，它在 HTML5 中已废弃，浏览器虽兼容但不推荐——真正该调的是 td 和 th 的 CSS padding。
为什么 cellpadding 看起来“没生效”
常见现象是写了 cellpadding="10"，但单元格内容还是紧贴边框。根本原因不是属性写错了，而是 CSS 优先级更高：
-
td, th { padding: 0; }这类重置样式会直接覆盖cellpadding - 用了
border-collapse: collapse后，cellpadding仍生效，但视觉上容易误判为“没起作用”，其实是边框合并导致内边距被压缩感弱化 - 表格父容器设置了
font-size: 0（常用于消除 inline 元素间隙），而你又用em单位写padding，结果实际值被缩放为 0
td 和 th 的 padding 怎么写才靠谱
目标明确：控制内容到单元格边框的距离。关键不是“怎么加”，而是“加在哪、怎么分方向”：
- 统一设置：
td, th { padding: 8px 12px; }→ 上下 8px，左右 12px - 区分表头和数据行：
th { padding: 10px 16px 8px; }（上/右/下）、td { padding: 6px 12px; } - 首列左内边距清零：
td:first-child, th:first-child { padding-left: 0; } - 配合
box-sizing: border-box，避免加border后宽度溢出
cellpadding 和 border-spacing 别混
很多人想“拉开行间距”，却去调 cellpadding，结果整行被撑高、对齐错乱。其实：
-
cellpadding（或等效的padding）只管“内容到边框”距离，不是行高 - 行高不足？优先调
line-height或min-height；撑开太多？说明padding+line-height叠加超出了预期 -
border-spacing控制的是单元格之间缝隙，仅在border-collapse: separate下有效；设成collapse后它就失效了，此时靠padding控制视觉疏密更可靠
真正容易被忽略的点：表格单元格的 padding 值会参与整行高度计算，且受 line-height 影响比普通块级元素更敏感——内容是单行文本时，padding-top + line-height + padding-bottom 才是最终行高，这个叠加关系在调试时经常被跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
