table直接加border属性不生效是因为HTML5中该属性已过时且默认为0，且默认采用分离边框模型导致边框重叠不统一；需用CSS的border-collapse: collapse合并边框，并为table、th、td均设置border。
table 元素直接加 border 属性不生效？原因在这里
HTML5 中 的 border 属性虽仍被浏览器支持，但属于过时用法（obsolete），且默认值为 0，不写就等于没边框。更关键的是：即使写了 border="1"，实际渲染出的边框是「分离边框模型」（separate borders），单元格之间会有双倍间距、边框重叠不统一，根本不是你想要的「整齐实线边框」。
用 border-collapse: collapse 才算真正控制表格边框
这是让表格边框变成干净实线的核心 CSS 规则。它强制把相邻单元格的边框合并成一条线，否则 border 再多也看着毛糙。
- 必须同时给
设置 border（比如 1px solid #000）和 border-collapse: collapse
和 也要单独设 border，否则内部线会缺失
- 别漏掉
border-spacing: 0（虽然 collapse 下它自动失效，但显式写上更稳妥）
想一劳永逸？用 class 统一控制比内联样式靠谱
每次手敲 style 太累，还容易漏掉某个 。定义一个 class 更安全，也方便后续改颜色/粗细。
- 给
加 class，比如 class="table-solid"
- CSS 里用后代选择器一次性覆盖所有单元格：
.table-solid th, .table-solid td
- 避免用
table tr td 这种宽泛选择器，可能误伤嵌套表格
.table-solid {
border: 1px solid #ccc;
border-collapse: collapse;
}
.table-solid th,
.table-solid td {
border: 1px solid #ccc;
padding: 8px;
}
border-style 选错导致「实线」变虚线？检查这三点
明明写了 border: 1px #000 solid，却看到点线或双线——大概率是继承了别的样式或拼写错误。
立即学习“前端免费学习笔记（深入）”；
-
solid 是唯一表示「连续实线」的关键字，dashed、dotted、double 都不行
- 检查是否被更高优先级的规则覆盖（比如某处写了
border-style: none）
- 某些重置 CSS（如 normalize.css）会默认清空表格边框，得手动补回来
最简验证法：临时加 !important 测试，如果此时变实线，说明被覆盖了。
|
| |
