表格美化核心在于border-collapse、padding和nth-child三属性组合：必须设border-collapse:collapse消除双线边框；th/td需分层设置padding（如th为10px 16px，td为8px 14px）；隔行变色须用tbody tr:nth-child(even)精准限定作用域。
直接上结论：表格好不好看，80%取决于 border-collapse、padding 和 nth-child 这三个 CSS 属性的组合使用，而不是加一堆花哨渐变或阴影。
为什么表格边框看起来又粗又糊？border-collapse: collapse 必须设
浏览器默认给 table、th、td 各自渲染边框，再叠上 border-spacing（默认 2px），结果就是“双线边框+缝隙”，尤其在深色背景上特别刺眼。
- 必须写
table { border-collapse: collapse; }，这是所有美化前提 - 别只给
table加border——它控制的是外框；真正要样式化的，是th和td的边框 - 如果用了
border-collapse: separate（比如想留缝隙），就一定要同步清掉border-spacing: 0，否则移动端容易溢出
单元格太挤、文字贴边？padding 要分层设置
padding 不是越大越好，也不是全设成 12px 就完事。表头和数据单元格对呼吸感的需求不同，硬套同一值反而降低可读性。
-
th建议padding: 10px 16px（左右稍宽，强化列标识） -
td建议padding: 8px 14px（紧凑但不压迫，适配多数数字/文本混合场景） - 避免用
padding: 12px这种简写——上下 padding 过大会撑高行高，导致斑马纹错位或悬停效果发虚 - 如果表格有图标或复选框，
padding-left单独加大 20px，比整体 padding 更可控
隔行变色失效或错位？tbody tr:nth-child(even) 才是正解
很多人写 tr:nth-child(even)，结果表头（th 在 thead 里）也被算进序号，导致第一行数据就变色。根源在于伪类计数是按 DOM 树层级来的，不是按“数据行”逻辑。
- 必须限定作用域：
tbody tr:nth-child(even)，把thead和tfoot排除在外 - 如果用了动态插入行（比如 JS append），
:nth-child仍有效；但用:nth-of-type反而可能漏掉某些tr - 颜色别用纯灰：
#f9f9f9比#f0f0f0更柔和，且在 OLED 屏上不会发亮刺眼 - 悬停效果建议加
transition: background-color 0.15s，不加会显得生硬
表头固定、内容滚动时样式断裂？position: sticky 需配合 z-index 和 background-clip
当给 thead th 加 position: sticky; top: 0 实现固定表头，常出现滚动时背景色被遮挡、边框断开、文字模糊等问题。
- 必须加
z-index: 2（不能是 1，否则可能被父容器 overflow 隐藏） -
background-clip: padding-box防止背景色溢出到边框区域，让border清晰可见 - 如果表头用了半透明背景（如
rgba(255,255,255,0.9)），务必加backdrop-filter: blur(2px)提升层次感，否则滚动时边缘会“渗色” - 注意：iOS Safari 对
sticky支持不稳定，若需兼容，得降级用 JS 监听 scroll + 动态切换 class
最易被忽略的一点：所有这些样式都依赖于语义化 HTML 结构。如果把 th 全写成 td，或者漏掉 thead/tbody，nth-child、sticky、甚至打印样式都会不可预期地失效——样式是骨架之上的皮肤，不是万能胶水。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
