直接给<td>加border才真正生效，<table>的border只画外框；必须显式设置<td>或<th>的border才能控制单元格边框，且需配合padding、border-collapse和颜色协调确保视觉稳定。
直接给 <td> 加 border 才算真正生效
给 <table> 设 border 只画外框，内部单元格之间依然没线；想控制某几个单元格有边、哪条边有、什么样式，必须把 border 写在 <td>（或 <th>）上。浏览器不会自动把表格边框“透传”到单元格，这是最常被误解的一点。
常见错误是只写：<table style="border: 1px solid #333">，结果只有外框，行与列之间空荡荡——因为 <td> 自身没边框，border-collapse 也无从合并。
- 正确做法：每个需要边框的
<td>都显式加style="border: 1px solid #999;" - 更推荐用 class：
<td class="border-right">，再统一定义.border-right { border-right: 2px dashed #e74c3c; } - 如果只设单侧边，比如
border-bottom: 1px solid red;，其他三边默认为none，无需额外清空
border-collapse: collapse 和 separate 的实际影响
默认是 border-collapse: separate，这时每个 <td> 的边框独立绘制，你加的 border-top 就真只在顶部出线；但一旦设了 border-collapse: collapse，相邻单元格的边框会“竞争”——谁粗、谁颜色深、谁样式优先级高，就显示谁。你设的边框可能被隔壁单元格的边框覆盖掉。
所以，精准控制单个单元格某一条边时，得先确认上下文：
立即学习“前端免费学习笔记（深入）”；
- 如果整表用了
border-collapse: collapse，又只想给第 2 列加右边框，建议整列统一设border-right，避免局部失效 - 若只需零星几个单元格有边，干脆显式设
table { border-collapse: separate; }，再单独加border，更可控 - 在
collapse模式下，border-style: hidden是个实用技巧：它能强制“吃掉”某条边，防止和邻居冲突
用 CSS 伪类批量操作某列或某行的边框
手动给几十个 <td> 加 class 太累，:nth-child() 是更现实的选择。但要注意 DOM 顺序——colspan 或 rowspan 会让序号偏移，导致选错列。
典型写法：
- 第 3 列所有单元格加右边框：
td:nth-child(3), th:nth-child(3) { border-right: 1px solid #3498db; } - 最后一行所有单元格加底边框：
tr:last-child td, tr:last-child th { border-bottom: 2px solid #2c3e50; } - 排除跨列单元格（防偏移）：
td:not([colspan]):nth-child(2) { border-left: 3px solid #e67e22; }
注意：th 也要一起选，否则表头和数据列边框不一致。
别忽略 padding 和 border-color 的协同效果
只加边框不加内边距，文字会紧贴边线，视觉拥挤；只加 padding 不调 border-color，可能让边框在浅色背景里看不清。这两者几乎总是要一起配。
另外，border 是简写属性，三个值缺一不可：width、style（如 solid）、color。只写 border-width: 1px; border-color: #000; 是无效的——border-style 默认是 none，没样式等于没边框。
容易踩的坑：
- 复制粘贴别人代码时漏掉
solid或dashed，边框完全不显示 - 在深色背景上用浅色文字 + 浅色边框（如
#ccc），对比度不足，用户看不见 - 设了
border-radius却发现只对<table>外框起作用，<td>的圆角需单独处理且兼容性差
真正难的不是加边框，而是让边框在不同设备、不同缩放、不同背景色下都稳定可辨——这要求你每次写 border 时，顺手检查 padding、color 和 border-collapse 上下文是否匹配。
