真正控制单元格边框必须给td/th显式设border并配合table{border-collapse:collapse}，仅设table边框只有外框；border简写三值缺一不可，border-collapse必须作用于table元素本身。
只给 td 或 th 加 border 才算真正控制单元格边框
直接给 table 元素设 border，顶多画个外框，内部单元格之间还是空白——这不是“单元格边框”，只是容器边框。真要让每个格子都有线，必须把 border 显式写到 td 和 th 上。
- 错误写法：
table { border: 1px solid #000; }→ 只有外框，无内线 - 正确写法：
td, th { border: 1px solid #ccc; }，再配合table { border-collapse: collapse; } - 如果只想加某一边（比如只下边框），用
border-bottom: 1px solid #999;更精准，避免干扰其他方向 - 注意：
border是简写属性，1px solid #000三个值缺一不可；只写border-width或border-color不生效，因为默认border-style是none
border-collapse: collapse 必须作用在 table 上，否则全是双线
浏览器默认用 border-collapse: separate，意思是每个 td 和 th 的边框都独立渲染，相邻单元格的边框会并排出现，视觉上就是“加粗”或“双线”。这不是 bug，是默认行为。
- 必须显式写：
table { border-collapse: collapse; }，它才能把贴在一起的边框合并成一条 - 这个声明只对
table元素本身有效，写在td或th上无效 - 如果用了
border="1"这种老写法，先加重置：table[border] { border: none; }，否则 CSS 的border-collapse可能被忽略 -
border-spacing在collapse模式下失效，别白费劲去调它
给特定单元格加边框，别碰 tr，直接操作 td/th
tr 元素本身不支持 border（多数浏览器会忽略），想高亮某一行、某一列或某个格子，必须下沉到单元格层级。
- 单个格子：
<td style="border: 2px dashed red">重点数据</td> - 整行右侧加边：
tr:nth-child(3) td:last-child { border-right: 2px solid blue; } - 第一列全加左框：
td:first-child, th:first-child { border-left: 1px solid #666; } - 避免用
bgcolor或bordercolor属性——HTML5 已废弃，不解析，也不起作用
边框颜色/样式和背景色撞车时，根本看不见
这是最常被忽略的隐形坑：边框颜色太淡、或和单元格背景色太接近，肉眼根本看不出线在哪。
立即学习“前端免费学习笔记（深入）”；
- 检查是否写了
border-color，而不是只靠继承——border: 1px solid没指定颜色，会用文字颜色（color），可能和背景同色 - 深色背景配浅色边框（如
#fff），浅色背景配深色边框（如#999），对比度至少 4.5:1 才清晰 - 虚线（
dashed）、点线（dotted）在小字号或高缩放下容易断连，关键表格建议优先用solid -
border-radius对table外框有效，但对td内部边框无效——别指望给单元格四角加圆角
border、表格的 border-collapse、以及颜色与背景的可见性平衡。漏掉任何一环，边框就不是“精准控制”，而是随机消失或意外加粗。 
