最可靠的方式是用border-collapse: collapse配合border-right设置列分割线。必须先给<table>设border-collapse: collapse，再对目标列的<th>和<td>显式设置border-right，如td:nth-child(2), th:nth-child(2) { border-right: 1px solid #ddd; }，并清除最后一列的border-right以避免多余线条。
border-collapse + border-right 是最可靠的方式
想让某几列之间有竖线，必须先让表格边框合并，否则 border-right 会和默认间隙打架，出现双线或错位。关键一步是给 <table> 加 border-collapse: collapse，否则所有后续设置都可能在不同浏览器里表现不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对目标列的
<td>和<th>设置border-right，比如“第2列右侧加线”，就写td:nth-child(2), th:nth-child(2) { border-right: 1px solid #ddd; } - 最后一列记得清掉
border-right，避免右边多出一条线 - 如果表头和数据行样式要区分，分开写：例如
th:nth-child(3) { border-right: 2px solid #333; }，td:nth-child(3) { border-right: 1px solid #eee; } - 别用
border-left反向推——容易漏掉第一列或搞错索引，border-right更直观、更少出错
用 <col> 元素控制列样式（兼容性有限）
<col> 是语义上专为列定义样式的标签，但它对 border 的支持很弱：Chrome 和 Firefox 支持 border，但 IE 完全忽略，Safari 表现也不稳定。如果你项目不需要兼容旧版 IE，可以试试。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
<table>开头插入<col>，按顺序对应列：<col><col class="divider"><col> - 然后写
col.divider { border-right: 1px solid #999; } - 注意：这个 border 不会自动延伸到表头或单元格内容区，视觉上常显得“悬浮”或断开，不如直接设单元格边框可靠
- 不能通过
nth-child动态选列，<col>必须显式写出，维护成本略高
rules 属性能快速加列分割线，但控制粒度太粗
rules 是 <table> 的原生 HTML 属性，值为 cols 时会在所有列之间加线。它简单、无需 CSS，但无法指定“只给第2、第4列加”，也不能调颜色或粗细。
常见错误现象：
- 写了
<table rules="cols">却没看到线？检查是否漏了border-collapse: collapse—— 某些浏览器（如老版 Edge）要求两者共存才渲染 -
rules="cols"会作用于所有列间，包括最左/最右边缘，导致外边框也变双线；需配合frame="void"或额外 CSS 清外边框 - 无法和
border混用：一旦用了rules，单元格上的border可能被覆盖或冲突
别碰 column-rule，它对 <table> 完全无效
column-rule 只响应 CSS 多栏布局（column-count 或 column-width），而 <table> 是独立的表格布局模型。哪怕你给 <table> 强行加了 column-count: 3，内部的 <tr> 和 <td> 也不会被拆进不同栏——浏览器直接忽略该声明，回退到默认表格渲染。
为什么容易误用：
- 开发者工具里能看到
column-rule被声明，但 computed 样式中没有生效，误以为是优先级问题 - 搜索“HTML 表格 分割线”时，部分教程混用了多栏布局示例，没强调适用边界
- 试图用它替代
border-right省代码，结果白忙一场
真正需要列分割线时，border-right 配合 border-collapse: collapse 是唯一既可控又兼容的路径；其他方式要么妥协功能，要么放弃兼容性。细节上，nth-child 的索引是否从 1 开始、最后一列是否遗漏清除、表头与数据行是否统一处理——这些地方一不留神，线就断了或重叠了。
