table和td边框“加粗”是因默认border-collapse:separate导致相邻边框独立渲染而视觉叠合；必须设table{border-collapse:collapse}并统一设置table、th、td的border样式才能实现单线合并。
table 和 td 的 border 为什么会“加粗”？
不是边框变粗了，是相邻边框没合并，视觉上叠在一起了。比如 table 设了 border: 1px solid #000，每个 td 也设了同样的 border，那 table 的 bottom border 和它第一行 tr 的 top border 就会紧挨着出现两条 1px 线——浏览器默认用的是 border-collapse: separate，相当于每条边都独立渲染。
必须用 border-collapse: collapse 才能真正解决
这个属性才是控制表格边框是否“合并”的开关，不设它，其他操作都是绕弯子：
-
border-collapse: collapse后，相邻边框（td之间、td与table之间）只画一条线，宽度取最大值（比如一边 1px、一边 2px，最终显示 2px） - 必须同时给
table、td、th都写border，否则 collapse 没效果——因为没边框可合并 -
border-spacing在collapse模式下完全失效，不用管它 - IE6–8 支持没问题，现代浏览器全支持，但没写
!DOCTYPE时可能触发怪异模式导致异常
为什么只设 table 的 border 不够？
很多人以为给 table 加个 border 就完事了，结果发现内边还是双线。这是因为：
-
table的 border 只画外框，不影响内部单元格的边框逻辑 - 单元格（
td/th）默认无边框，但一旦你显式写了border，它就参与border-collapse计算 - 如果只设
table边框，而td没设，那td之间仍是默认无边框，看起来像“漏线”，实际是边框缺失 - 常见翻车现场：
table { border: 1px solid #000; }+td { padding: 8px; }→ 没边框，只有空白格子
细线表格的最小安全写法
要确保所有边都是干净的 1px 单线，最简且鲁棒的写法是：
table {
border-collapse: collapse;
border: 1px solid #000;
}
td, th {
border: 1px solid #000;
padding: 8px;
}
注意：这里 table 和 td 的 border 值完全一致，避免因宽度/颜色差异导致合并后意外加粗或断线。如果某列需要无边框，不要删 border，改用 border-color: transparent 或 border-style: none —— 否则会破坏 collapse 的边框拓扑结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
