必须使用CSS的border属性配合border-collapse: collapse才能精确控制表格边框；HTML的border属性仅是语义标记，不控制样式，且在不同浏览器中渲染不一致，现代开发应完全弃用。
直接用 CSS 的 border 属性 + border-collapse: collapse 才能真正加出可控边框；HTML 的 border 属性（如 border="1"）只是语义标记，不控制样式，也不可靠。
为什么 border="1" 看起来有边框却不能当真
它不是样式属性，而是 HTML5 中的语义开关——告诉浏览器“这是数据表”，不承诺画什么线、画几条、画多粗。Chrome 可能渲染外框+断续内线，Firefox 可能只画外框，Safari 甚至忽略内边框。你看到的“边框”，其实是 UA 默认样式在起作用，不是 border="1" 自己干的。
-
border="0"是非法值，被静默丢弃，等效于没写 -
border="2"或border="5"在现代浏览器中完全被忽略，不会加粗 - 它无法指定颜色、线型（
dashed）、圆角或响应式行为
border-collapse: collapse 必须写在 table 上
这是所有“双线变单线”问题的根因。浏览器默认是 border-collapse: separate，每个 th 和 td 独立画边框，中间还隔着 border-spacing: 2px 的缝隙——你看到的“粗边框”，其实是两个 1px 边框 + 2px 白缝的视觉错觉。
- 必须写在
table元素上，对th或td单独声明无效 - 搭配
border-spacing: 0显式声明更稳妥（虽然collapse下它被忽略，但防误配） - 交界处边框取“宽者胜出”：若
table { border: 2px }，td { border: 1px }，合并后仍显示 2px
快速加边框的最小可行 CSS 写法
别写三行，用一行选择器覆盖全部：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
table, th, td { border: 1px solid #ccc; border-collapse: collapse; }
注意：这个写法把 border-collapse 也写在了 th/td 上，虽无害但不生效——真正起作用的只有写在 table 上的那一份。更清晰的写法是分两段：
table { border-collapse: collapse; }
th, td { border: 1px solid #ccc; }
- 想只留外框？删掉
th, td { border: ... }，再单独给table加border - 想让表头更醒目？单独设
th { border: 2px solid #333; }，交界处自动按 2px 显示 - 响应式下文字挤成一团？加
table { min-width: fit-content; }或width: 100%防塌缩
容易被跳过的布局兜底动作
很多人写了 border-collapse: collapse 就以为完事了，结果表格在窄屏里文字换行、边框断裂、列宽崩坏——这不是边框的问题，是表格本身没设宽度约束。
-
border-collapse解决“怎么画线”，不解决“画多宽” - 没设
width或min-width，表格会随内容收缩，导致边框视觉断裂 -
box-sizing: border-box对表格无效，别白费劲
真正麻烦的从来不是写几行 CSS，而是漏掉 border-collapse: collapse 这一行——它不报错、不警告，只让边框看起来“怪怪的”，然后你花半小时调颜色和粗细，却始终没碰对地方。
