border-collapse: collapse 是进阶表格样式的前提，必须在 table 选择器首行声明，否则边框叠加、悬停割裂、斑马纹错位；th 与 td 边框应差异化设置，慎用 border: none；sticky 表头需配合 tbody tr:nth-child 避免计数错乱。
直接说结论：用 border-collapse: collapse 是进阶样式的基础门槛，没它，所有边框控制、斑马纹、悬停效果都会出错或失效。
为什么 border-collapse: collapse 必须最先写
浏览器默认给 <table> 应用 <code>border-collapse: separate，导致每个 <th> 和 <code><td> 都自带独立边框和间隙——这会让 <code>border-bottom 叠加、hover 背景色被边框割裂、nth-child 效果错位。
- 必须在
table选择器里第一行声明border-collapse: collapse，不能靠继承或后置覆盖 - 一旦漏写或写成
inherit，th和td的border就会双线重叠，调试时看到的“边框变粗”“对不齐”基本都源于此 - IE8+ 和所有现代浏览器都支持该属性，无需前缀
th 和 td 的边框策略差异
表头和数据单元格的边框职责不同：表头强调结构锚点，数据行强调横向阅读流。混用同一套 border 值反而降低可读性。
-
th推荐只设border-bottom: 2px solid #333，不设左右/上边框，避免视觉压迫 -
td推荐只设border-bottom: 1px solid #eee，保持行间呼吸感 - 若需外边框，统一加在
table上（如border: 1px solid #ddd），别分散到每个单元格 - 慎用
border: none—— 它会干扰border-collapse的渲染逻辑，改用border-color: transparent
固定表头 + 斑马纹的兼容陷阱
position: sticky 让 <thead> 在滚动时悬停，但和 <code>tr:nth-child(even) 组合时容易出 bug：sticky 区域内的 tr 会被重新计数，导致奇偶错乱。
- 解决方案：把斑马纹规则写在
tbody tr上，而非全表tr，例如：tbody tr:nth-child(odd) { background-color: #fafafa; } -
thead th必须设background-color，否则 sticky 后露出下方行背景，造成闪烁 - 移动端 Safari 对
sticky支持不稳定，建议加backface-visibility: hidden强制硬件加速 - 不要用
colgroup控制列宽再配table-layout: fixed—— 这会破坏 sticky 表头的宽度计算，优先用 CSS Grid 替代复杂列布局
真正卡住人的从来不是语法，而是 border-collapse 没生效、nth-child 选错了父容器、或者 sticky 和 table-layout 暗中冲突——这些细节不验证，样式再漂亮也跑不起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
