必须设置 table { border-collapse: collapse }，再设外框边框并清除单元格边框，否则因默认分离模型和间距导致外框断开。
只想要表格外框变粗，内部单元格不加边框？直接给 table 元素设 border 就行，但必须同时关掉默认的分离边框模型，否则外框会“断开”或“虚线化”。
为什么只设 table { border: 3px solid #000 } 不生效？
浏览器默认用 border-collapse: separate 模式渲染表格，此时 table 的边框会被 border-spacing（默认 2px）撑开，导致外框看起来像四段短线，尤其在 Chrome/Firefox 中明显。更糟的是，如果没显式重置 border-spacing，哪怕你写了粗边框，它也会被间隙截断。
- 现象：外边框显示为四段独立短线，中间有白缝
- 根本原因：
border-collapse: separate+ 默认border-spacing: 2px - 解决动作不是“加边框”，而是“先关掉分离模型”
table 外边框加粗的最小必要 CSS
三行代码搞定，顺序不能错：
-
table { border-collapse: collapse }—— 必须写在最前，否则后续border仍受分离模型干扰 -
table { border: 3px solid #000 }—— 这里设你需要的厚度、颜色、样式（如dashed） -
th, td { border: none }—— 显式清空单元格边框，避免和外框叠加出“加粗交界线”
示例：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
border: 3px solid #2c3e50;
}
th, td {
border: none;
padding: 8px;
}
想保留内部分隔线，但外框更粗怎么办？
这时候不能只靠 border-collapse: collapse，因为所有边框会合并成同一线宽。你需要手动控制每条边：
- 给
table设四边独立边框：border-top: 4px solid #3498db; border-bottom: 4px solid #3498db; border-left: 4px solid #3498db; border-right: 4px solid #3498db; - 给
th和td设细边框，比如border: 1px solid #bdc3c7 - 仍然要写
border-collapse: collapse，否则内边框和外边框之间会出现额外缝隙
注意：如果用了 border-radius，记得加 overflow: hidden，否则圆角处可能漏出内边框。
用旧 border="1" 属性能控制外框粗细吗？
不能。HTML 的 border 属性只接受整数（如 border="3"），但它不控制像素值，而是由浏览器映射为固定粗细，且无法设颜色、样式、圆角。更重要的是，它强制启用 border-collapse: separate 和默认 border-spacing，导致外框必然断开。2026 年还在用这个属性，基本等于主动放弃边框控制权。
真正影响外框是否连贯、是否可调粗细的，只有两件事：是否用了 border-collapse: collapse，以及是否显式清除了 th/td 的边框干扰。其他都是锦上添花。
