真正可控的表格边框需三要素协同：设border-collapse: collapse于table，且table、th、td的border值完全一致；html的border="1"已废弃，仅画外框且不可控。
直接给 <table> 加 <code>border 属性或只写 border: 1px solid #000，边框大概率会出错——要么只有外框、要么双线、要么打印时消失。真正可控的做法是用 CSS 三要素协同：必须设 border-collapse: collapse，同时给 <table>、<code><th>、<code><td> 都写 <code>border，且三者值要一致。
为什么加了 border="1" 还没内边框？
HTML 的 border="1" 是废弃属性，它等价于 border-collapse: separate + border-spacing: 2px，只画外框，单元格之间留白缝，且无法控制颜色、样式、圆角。现代浏览器虽兼容，但行为不可控——你看到的“没边框”，其实是内边框被默认间距撑开了。
- 删掉所有
border="1"或cellspacing属性，它们和 CSS 边框模型冲突 - 检查是否误用了
outline：它不占布局空间，会导致视觉上边框“塌陷” - 确认没在
<thead> 或 <code><tbody> 上额外加 <code>border，这会覆盖<th>/</th> <td> 的边框 <h3> <code>border-collapse: collapse必须加在<table> 上 <p>这个声明不是可选项，是开关。不加它，<code><th> 和 <code><td> 的边框永远是独立绘制的，哪怕都设了 <code>1px solid black，交界处也会叠加成视觉 2px 粗线，或因颜色/样式不一致被浏览器按“胜出规则”吃掉某一边。- 只加在
<table> 元素上，加在 <code><th> 或 <code><td> 上无效 <li>第三方框架（如 Bootstrap）可能重置了该值，用浏览器开发者工具检查 computed 样式里的 <code>border-collapse - 设为
collapse后，border-spacing自动失效，别再写border-spacing: 0白费力气
怎么只给某几列或某一行加边框？
靠伪类选择器批量操作，但要注意
colspan/rowspan会让序号偏移。优先选中<td> 和 <code><th>，避免漏掉表头。 <ul> <li>第 2 列加右边框：<code>td:nth-child(2), th:nth-child(2) { border-right: 1px solid #3498db; } - 只加在
- 最后一行加底边框：
tr:last-child td, tr:last-child th { border-bottom: 2px solid #2c3e50; } - 排除跨列单元格（防偏移）：
td:not([colspan]):nth-child(3) { border-left: 3px dashed #e67e22; } - 想让某条边“消失”又不干扰邻居：
border-style: hidden比none更可靠，它能强制让该边不参与合并竞争
最容易被忽略的是：边框颜色、宽度、样式三者只要有一个不一致，border-collapse: collapse 就会触发浏览器的“边框胜出规则”，导致局部边框意外消失或变粗。调试时先统一三者值，再微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
