border-collapse: collapse 必须写在table元素上，否则无效；它是合并边框的前提，不加则默认separate导致双线、白缝；需配合统一border声明和合理padding设置。
border-collapse: collapse 是必须加的第一行 CSS
不加这句，所有后续样式都会被浏览器默认的双线边框+2px间距毁掉。你看到的“边框又粗又糊”“列之间有白缝”，根源就是 border-collapse 默认值是 separate，而不是 collapse。
常见错误现象：table { border: 1px solid #ccc; } 看起来外框有了，但单元格之间还是虚线或错位；用 cellspacing="0" 这种 HTML 属性在现代项目里已过时，且无法响应式控制。
- 必须写
table { border-collapse: collapse; }，放在所有表格样式最前面 - 如果真要留缝隙（极少数设计需求），得同时设
border-spacing: 0;，否则移动端容易横向溢出 -
border-collapse只对table元素生效，不能写在th或td上
padding 要分 th 和 td 单独设，不能一刀切
表头和数据单元格的视觉权重不同，统一用 padding: 8px 会让表头显得单薄、数据行又太松散。尤其当表头含图标或复选框时，左右留白需求更明显。
使用场景：金融类表格数字密集，需紧凑；后台管理列表常含操作按钮，左侧需额外空间。
-
th推荐padding: 10px 16px—— 左右稍宽，强化列标识感 -
td推荐padding: 8px 14px—— 上下略小，避免行高撑开导致斑马纹错位 - 有图标/复选框时，
td:first-child单独加padding-left: 20px，比整体 padding 更可控 - 避免用
padding: 12px这种简写，上下 padding 过大会让 hover 效果发虚
隔行变色必须限定在 tbody 里写 :nth-child
很多人写 tr:nth-child(even)，结果第一行（即 thead 里的 tr）就被染色了。这是因为 :nth-child() 按 DOM 顺序计数，thead > tr 是第一个子元素，tbody > tr 自然从第 2 个开始算起。
性能影响：用 :nth-of-type 在动态插入行时可能漏掉某些 tr（比如中间插入了 tr[hidden] 或带 class 的辅助行）；:nth-child 更稳定。
- 正确写法是
tbody tr:nth-child(even)，把thead和tfoot完全排除在外 - 颜色别用纯灰，
#f9f9f9比#f0f0f0在 OLED 屏上更柔和，不刺眼 - 搭配悬停效果时，
tbody tr:hover建议用轻微渐变或透明度微调，避免色块跳跃
固定表头时 background-clip 和 z-index 缺一不可
给 thead th 加 position: sticky; top: 0 后，滚动时经常出现背景色被截断、边框断开、文字边缘发虚，根本原因是层叠顺序和背景渲染区域没控住。
容易踩的坑：只加 z-index: 1 不够，父容器若有 overflow: hidden 会直接裁掉 sticky 元素；背景设成半透明却不加模糊，滚动时边缘“渗色”明显。
- 必须设
z-index: 2（不能是 1），确保盖过内容区但不干扰其他 UI 层级 - 必须加
background-clip: padding-box，防止背景色溢出到边框区域，让border清晰可见 - 若用
rgba(255,255,255,0.9)，同步加backdrop-filter: blur(2px)，否则滚动时表头文字边缘会透出下方内容
border-collapse 的作用域和 tbody 在伪类选择器里的必要性——它们不是“锦上添花”，而是让样式真正生效的底层前提。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
