padding需分方向设置且须与border-collapse、vertical-align、伪类作用域协同：th用10px 16px，td用8px 14px，图标列单独设padding-left；必须设vertical-align:middle；table必加border-collapse:collapse；隔行变色要用tbody tr:nth-child(even)。
padding 值必须分方向写，不能一刀切
直接写 padding: 12px 看似省事，实际会让表头和数据行高度不一致——th 文字加粗后行高天然略大，再叠加上下等量 padding，视觉上就“浮”起来了。更麻烦的是，斑马纹（tbody tr:nth-child(even)）会因行高差异错位，悬停效果也容易发虚。
推荐按语义区分设置：
-
th：用padding: 10px 16px—— 左右稍宽，强化列标识感 -
td：用padding: 8px 14px—— 紧凑但留出呼吸空间，适配数字/短文本混合场景 - 含图标或复选框的列：
padding-left: 34px单独加大（比如图标宽 16px + 间距 18px），比整体 padding 更可控
vertical-align 不设，文字就会“吊着”
哪怕 padding 设对了，th 和 td 里文字仍可能上下错位：多行文本、带图标单元格、甚至纯数字列都容易出现顶部对齐或底部贴边。这不是 bug，是浏览器默认 vertical-align: baseline 导致的。
必须显式统一：
- 加一行
th, td { vertical-align: middle; } - 别只写
td { vertical-align: middle; }——th落在thead里，漏掉它，表头文字就顶到上边框 - 如果某列要顶部对齐（比如含操作按钮的列），单独加
class="align-top"并设vertical-align: top;，不破坏全局规则
border-collapse: collapse 是前提，不是可选项
没加这句之前，所有 padding 都白调：每个 td 和 th 默认自带 cellspacing 和 border 间隙，padding 再大也压不住那种松散感。更糟的是，双线边框会让表格看起来像被“割裂”。
必须在 table 上第一时间声明：
-
table { border-collapse: collapse; }—— 合并边框，让线条干净利落 - 配合
border: 1px solid #e0e0e0;给th, td，才能真正控制边框粗细和颜色 - 千万别只给
td加边框而漏掉th，否则表头和数据列边框颜色/粗细不一致，视觉失衡
隔行变色失效？检查伪类作用域
很多人写 tr:nth-child(even) { background: #f9f9f9; }，结果第一行数据就变灰——因为 tr 全局计数，thead 里的 tr（哪怕只有 1 行）也被算作第 1 个子元素，后面所有序号全偏移了。
正确写法只作用于数据体：
- 用
tbody tr:nth-child(even)，确保只匹配tbody内部的行 - 如果表格没显式写
<tbody>，浏览器会自动补，但建议手动包裹，结构更清晰、样式更可控 <li>搭配 <code>padding使用时，注意背景色区域是否被 padding 撑开导致色块“漂浮”——此时需确认box-sizing: border-box是否已设（通常默认就是，但显式声明更稳）
padding 不是装饰性属性，它是表格呼吸感的底层支撑。调得过大会撑散结构，调得过小会让内容窒息；更关键的是，它必须和 border-collapse、vertical-align、伪类作用域协同生效——少一个，观感就垮一块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
