table默认不显示垂直线，因border-collapse默认为collapse导致纵向边框被合并；必须设separate才能用border-left/right控制垂直线，并配合border-spacing精准调控间距。
table 默认不显示垂直线，因为 border-collapse: collapse
直接写 <table border="1"> 只能看到外框和横线，列之间没竖线——这不是你漏写了 border-left，而是浏览器默认把相邻单元格边框“合并”了。关键开关是 border-collapse：它设为 collapse（默认值）时，所有纵向边框都会被吞掉；必须显式设成 separate，border-left 和 border-right 才能真正生效。
常见错误：
– 忘记加 border-collapse: separate，只拼命调 border-right 却没反应
– 用了 border-collapse: collapse 还想靠 border-spacing 控制间隙（它此时完全无效）
- 必须写：
table { border-collapse: separate; } - 搭配使用：
border-spacing: 0;或具体值（如4px），它定义的是单元格之间的“空白距离”，不是边框宽度 - 如果要保留外框但只加内部竖线，外边框用
border单独控制，别混在一起
给特定列加 vertical divider，用 nth-child 而非 class
想只在第 3 列右边画一条线？别给每个 <td> 手动加 class="divider"，既难维护又容易漏掉 <th>。最稳的方式是用 CSS 选择器批量命中：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 写
table td:nth-child(3), table th:nth-child(3) { border-right: 1px solid #e0e0e0; }—— 同时覆盖表头和数据行，对齐不偏移 -
nth-child(n)比nth-of-type更可靠，因为表格里<th>和<td>是同级兄弟节点，但标签名不同 - 如果用了
<colgroup>，可以试col:nth-child(3) { border-right: 1px solid #e0e0e0; }，但 IE 不支持，慎用
rules 属性已过时，别在 HTML 表格里用
rules="cols" 看起来很省事，但它属于 HTML4 遗留属性，HTML5 中已废弃。现代浏览器虽还兼容，但行为不可控：比如在某些缩放比例下竖线会错位、无法设置颜色粗细、不响应媒体查询。更麻烦的是，它和 CSS 的 border 规则冲突，一旦同时存在，渲染结果可能随机失效。
立即学习“前端免费学习笔记（深入）”；
- 彻底放弃：
<table rules="cols"> - 替代方案只有纯 CSS：
border-collapse: separate+border-right组合 - 如果旧项目还在用
rules，迁移时注意检查所有<th>是否被遗漏——rules对表头的支持比对<td>更弱
Flex/Grid 布局里套表格，vertical divider 会失效
如果你的表格被包在 display: flex 或 display: grid 容器里，且父容器设置了 overflow: hidden 或 max-width，那竖线可能被裁切或根本不出现在视口内。这不是表格本身的问题，而是布局流被截断了。
- 检查开发者工具的 computed 样式，确认
border-right值是否真实生效（不是被覆盖或 inherit 为 none） - 给表格加
min-width: max-content，防止 Flex 主轴压缩导致列宽归零、竖线消失 - Grid 场景下，避免用
grid-template-columns: 1fr 1fr等比例划分后又强制表格自适应——表格有自己的内部计算逻辑，和 Grid 轨道不联动
border-collapse: separate → 选中目标列单元格 → 加 border-right。其它所有“捷径”（rules、伪元素、背景图）要么不兼容，要么在表格重绘或打印时掉线。真正容易被忽略的，是 border-spacing 和 border-collapse 的绑定关系——它们从来不是独立参数，而是一对开关。 
