border-collapse默认值为collapse导致垂直线消失，必须设separate才能用border-left/right控制垂直线；配合border-spacing设置单元格间距，并用nth-child或class精准定位列添加边框。
table 的 border-collapse 默认值让垂直线消失
直接写 <table border="1"> 时，你看到的只有外边框和横线，垂直分割线根本不出现在单元格之间——这是浏览器默认把相邻边框合并了。关键不是加不加 border，而是要不要“拆开”边框。
必须显式设置 border-collapse: separate，否则 border-left 和 border-right 在多数情况下会被吞掉或重叠。这个 CSS 属性才是控制垂直线是否可见的开关。
-
border-collapse: collapse（默认）：所有边框合并成一条线，border-spacing无效，垂直线无法独立控制 -
border-collapse: separate：边框各自独立，border-spacing生效，才能用border-left/border-right插入垂直线
给特定列加垂直线要用 border-left 或 border-right
想只在第2列右边画一条线？别去改 <td> 的 border 全局属性，容易错位。最稳的方式是定位到该列所有单元格，统一加 border-right。
用 CSS 选择器比内联 style 更可靠，也方便复用。比如给第二列加右侧细线：
立即学习“前端免费学习笔记（深入）”；
table td:nth-child(2),
table th:nth-child(2) {
border-right: 1px solid #ddd;
}
-
nth-child(n)比nth-of-type更适合表格，因为<th>和<td>是不同标签但同级 - 务必同时选中
th和td，否则表头和内容列对不齐 - 如果用了
colgroup，可以给<col>设border-right，但兼容性略差（IE 不支持）
border-spacing 配合 separate 才能留出垂直线间隙
设了 border-collapse: separate 后，border-spacing 才起作用。它不是“边框间距”，而是“单元格之间的空白距离”，这个空白区域会显示父容器背景色——也就是你看到的“分隔缝”。
垂直线实际由两部分组成：左侧单元格的 border-right + 右侧单元格的 border-left + 中间 border-spacing 的空隙。三者共同决定视觉宽度和颜色一致性。
-
border-spacing: 0 0→ 单元格紧贴，左右边框可能重叠或抵消 -
border-spacing: 0 1px→ 水平无缝，垂直有 1px 空隙（常用来模拟细线） - 若只设一个值如
border-spacing: 2px，它同时作用于横向和纵向
响应式表格里垂直线容易断开或错位
当表格在小屏下变成滚动容器（overflow-x: auto）或列被隐藏时，nth-child 定位会失效——比如隐藏第一列后，原第二列变成 nth-child(1)，但样式还挂在 nth-child(2) 上。
更鲁棒的做法是给需要垂直线的列加 class，而不是依赖序号：
<td class="has-vline">数据</td>
.has-vline {
border-right: 1px solid #e0e0e0;
}
- class 方式不受列顺序变化、动态增删列影响
- 配合 JavaScript 动态切换列可见性时，class 可随逻辑同步更新
- 如果用框架（React/Vue），直接绑定 class 到列配置项，比硬编码序号安全得多
垂直线看着简单，真正麻烦的是它在各种组合场景下的稳定性——border-collapse 模式、border-spacing 值、选择器粒度、响应式逻辑，缺一不可。漏掉任意一环，线就断了或者叠在一起。
