table {
  border-collapse: collapse;
}

这样之后：

立即学习“前端免费学习笔记（深入）”；

• 相邻单元格的边框会合并成一条线（取较宽、较深或更靠前的样式）
• border-spacing 失效，不再有间隙
• 只需给 table 或 th/td 统一设 border，就能得到干净的网格线

顺便控制边框细节

合并后，边框样式更可控。比如：

• 想所有线条都是 1px 灰色：直接写 table, th, td { border: 1px solid #ccc; }
• 想表头加粗、内容细线：分别设置 th { border-bottom: 2px solid #333; } 和 td { border-bottom: 1px solid #eee; }，collapse 会自动融合交点
• 要去掉外边框只留内线？给 table 设 border: none，只给 th/td 设左右/下边框即可

慎用 separate 模式下的替代方案

极少数需要保留间距（比如做卡片式表格），就别用 collapse。此时可：

• 显式设 border-spacing: 0 消除空隙
• 统一控制 th/td 的 border，避免某几列多出一条线
• 用 outline 替代 border 避免盒模型干扰（但 outline 不支持圆角、不占布局空间）

基本上就这些。记住：做常规数据表格，border-collapse: collapse 是第一步，也是最关键的一步。