HTML表格单元格间距需通过border-spacing（控制格子间隙）和padding（调整内容距边框距离）实现，伪类仅辅助动态视觉效果；border-spacing在border-collapse:separate时生效，padding作用于td/th，合并单元格时优先用class而非伪类处理。
HTML表格单元格间距不能靠伪类直接控制，关键在于正确使用 border-spacing 和 padding，伪类（如 :hover、:nth-child）只起辅助作用——它们能帮你动态调整特定单元格的内边距或背景，但无法替代基础布局属性。
用 border-spacing 控制单元格之间距离
这是控制表格“格子间隙”的核心属性，作用于 <table> 元素本身，且仅在 border-collapse: separate（默认值）时生效：
- 设置水平与垂直间距：
border-spacing: 8px 4px;（先水平后垂直） - 单值写法统一所有方向：
border-spacing: 6px; - 若已设
border-collapse: collapse，border-spacing将失效——此时单元格“贴合”，间距归零
用 padding 调整单元格内容离边框的距离
这才是真正影响“视觉间距感”的常用方式，作用于 <td> 和 <th>：
- 统一设置：
td, th { padding: 10px 16px; }（上下10px，左右16px） - 差异化处理：第一列留白少些，操作列加右边距，例如
td:first-child { padding-left: 6px; } - 响应式微调：
@media (max-width: 768px) { td, th { padding: 6px 10px; } }
伪类配合实现动态间距效果
伪类不改变物理间距，但可通过 padding 或 transform 制造“视觉呼吸感”：
立即学习“前端免费学习笔记（深入）”；
- 悬停放大+内边距微调：
td:hover { padding: 12px 18px; background: #f5f5f5; } - 隔行变色时微调偶数行内边距：
tr:nth-child(even) td { padding-top: 9px; padding-bottom: 9px; } - 首行表头加顶部留白：
thead tr th { padding-top: 14px; }
合并单元格时的间距处理技巧
当使用 colspan 或 rowspan 后，border-spacing 仍生效，但 padding 需单独定义：
- 合并后的
<td colspan="2">仍继承通用padding规则 - 如需区别对待，可加 class：
<td class="wide-cell" colspan="2">，再写.wide-cell { padding: 12px 24px; } - 避免用伪类选中合并单元格——
:nth-child在跨列时容易错位，优先用 class 或属性选择器
