必须写 border-collapse: collapse，否则表格边框会因默认 separate 模式和 border-spacing 叠加而呈现双线、发虚、粗重；需在 table 上显式声明，且 th/td 边框须统一设置，隔行变色要限定 tbody，圆角需配合 overflow: hidden。
border-collapse: collapse 是必须写的前提
表格边框看起来“双线”“发虚”“粗得离谱”，90%是因为没写 border-collapse: collapse。浏览器默认对 table、th、td 各自渲染边框，再叠上默认 border-spacing: 2px，结果就是相邻单元格边框并排出现——不是重叠，是错位堆叠。
必须在 table 上显式设置：table { border-collapse: collapse; }
- 不写这句，后面所有
border设置都白调——你调的是“两条线”，不是“一条线” - Firefox 默认用
separate模式，Chrome/Safari 虽默认collapse，但不声明就不可靠 - 如果后续要加圆角（
border-radius），也必须先设collapse，否则圆角会失效或切掉内容
th 和 td 的 border 要分开设，不能只给 table 加
table 的 border 只控制外框；真正决定网格线样式的是 th 和 td 的 border。想让横竖线都清晰连贯，就得给它们统一设边框。
推荐写法：th, td { border: 1px solid #e0e0e0; }
立即学习“前端免费学习笔记（深入）”；
- 别漏掉
th——表头没边框，视觉上就断开了 - 颜色建议用浅灰（如
#e0e0e0或#ddd），深色背景配浅色边框更稳 - 如果只要横线不要竖线，可以写
border-bottom: 1px solid #eee;，但注意border-collapse: collapse仍需保留 - 避免混用不同宽度：比如
th { border: 2px solid #000; }+td { border: 1px solid #000; }，会导致交点处粗细打架
隔行变色时 nth-child 必须限定在 tbody 里
直接写 tr:nth-child(even) { background-color: #f9f9f9; } 很容易翻车——它会把 thead 里的 tr 也算进去，导致表头变色或错行。
正确写法：tbody tr:nth-child(even) { background-color: #f9f9f9; }
- HTML 中明确写出
<tbody>包裹数据行，不然某些浏览器会自动补但行为不一致 - 如果用了
border-collapse: collapse，背景色会自然贴合边框，不会留白缝 - 配合
hover时也建议限定作用域：tbody tr:hover { background-color: #f0f8ff; }
想加圆角或阴影，overflow: hidden 不能省
border-radius 对 table 生效，但内部 th/td 的边框会溢出圆角区域，看起来像被“削掉一块”。这不是 bug，是渲染逻辑使然。
解决办法：table { border-radius: 6px; overflow: hidden; }
-
overflow: hidden是关键——它裁掉超出圆角的部分，让整体边缘干净 - 如果同时加了
box-shadow，建议一起写：box-shadow: 0 1px 4px rgba(0,0,0,0.08); - 移动端小屏下，圆角+阴影可能让表格显得臃肿，可加媒体查询临时关掉：
@media (max-width: 768px) { table { border-radius: 0; box-shadow: none; } }
border-collapse: collapse 写在错误层级（比如只写了 th 没写 table），或者忘了 tbody 限定导致隔行变色错位。这些细节不报错，但样式一跑就很难定位。 
