用 border-collapse: collapse 可消除表格单元格默认缝隙，使边框合并为单线；再统一设置 border、调整 padding、表头样式和隔行变色，即可快速提升表格专业感。
表格样式难看，往往不是内容问题，而是边框和间距没处理好。用 border-collapse: collapse 是最直接有效的改善方式，它能消除单元格默认的缝隙，让表格看起来更紧凑、专业。
为什么表格默认看起来松散？
浏览器给 table、td、th 默认设置了 border-spacing 和 separate 边框模型，导致相邻单元格边框各自独立、中间留白。哪怕你写了 border，也会出现双线或空隙，显得杂乱。
用 border-collapse 一键收拢边框
只需在 table 元素上加一行 CSS：
这样所有单元格的边框就会合并成一条线，不再重复、不再留缝。配合统一的 border 设置，效果立竿见影。
立即学习“前端免费学习笔记（深入）”；
搭配几个小调整，效果更稳
- 给 table、th、td 统一设置 border: 1px solid #ccc，避免部分边框缺失
- 去掉 th/td 的默认 padding 过大问题，可设 padding: 8px 12px 控制内边距
- 为表头加背景色和文字加粗：th { background: #f5f5f5; font-weight: 600; }
- 隔行变色提升可读性：tr:nth-child(even) { background: #fafafa; }
注意兼容性与特殊情况
border-collapse 在所有现代浏览器中都支持良好（包括 IE8+）。唯一要注意的是：如果表格里用了 colspan 或 rowspan，collapse 模式下边框合并逻辑依然可靠，无需额外处理。但若同时设置了 border-spacing，它会被 collapse 忽略——所以记得删掉或注释掉 border-spacing。
