必须写 border-collapse: collapse 才能真正重叠边框，否则浏览器默认 separate 模式导致边框错位堆叠；th 和 td 的 border 必须统一设置；隔行变色需限定在 tbody 内。
必须写 border-collapse: collapse 才能真正重叠边框
表格边框看起来“双线”“发虚”“粗得离谱”，90% 是因为没在 table 上显式声明 border-collapse: collapse。浏览器默认用 separate 模式，再叠加 border-spacing: 2px，结果就是相邻 th/td 的边框并排错位堆叠，不是重叠——你调的是两条线，不是一条线。
Firefox 默认是 separate，Chrome/Safari 虽默认 collapse，但不声明就不可靠。所以必须写：
table { border-collapse: collapse; }
漏掉这句，后面所有 border 设置都白调。
如果后续要加 border-radius，也必须先设 collapse，否则圆角会切掉内容或直接失效。
th 和 td 的 border 必须统一设置
table 元素的 border 只控制外框；真正决定网格线样式的是 th 和 td 的 border。想让横竖线连贯清晰，就得给它们统一设：
th, td { border: 1px solid #e0e0e0; }
- 别漏掉
th——表头没边框，视觉上就断开了 - 避免混用不同宽度：比如
th { border: 2px solid #000; }+td { border: 1px solid #000; }，交点处会粗细打架 - 如果只要横线不要竖线，可写
border-bottom: 1px solid #eee;，但border-collapse: collapse仍需保留
用 border-spacing 控制单元格间距（仅在 separate 模式下有效）
想在单元格之间留空隙，不能靠 margin 或 padding，必须用 border-spacing，但它只对 table 生效，且前提是 border-collapse: separate（即没写 collapse 或显式写了 separate）。
例如：
table { border-spacing: 5px 15px; /* 垂直 5px，水平 15px */ }
注意：border-spacing 和 border-collapse: collapse 互斥——一旦设了 collapse，border-spacing 就完全失效。
调整单元格内容与边框的距离？那该用 th/td 的 padding，比如 py-2 px-3，和边框间距无关。
隔行变色必须限定在 tbody 里
直接写 tr:nth-child(even) 很容易翻车——它会把 thead 里的 tr 也算进去，导致表头变色或错行。
正确写法是限定作用域：
tbody tr:nth-child(even) { background-color: #f9f9f9; }
如果用了 Tailwind，建议配合 odd:/even: 响应式变体，并确保结构中 thead 和 tbody 明确分离。否则动态渲染时（如 React 条件移除首行），nth-child 会因索引偏移而失效。
最麻烦的从来不是“怎么写”，而是 border-collapse 没声明、th/td 边框不一致、以及 nth-child 未限定 tbody 这三处——它们共同构成表格样式失控的三角区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
