table默认不显示垂直线，因border-collapse默认为collapse导致纵向边框被合并；必须设separate才能用border-left/right控制垂直线，并配合border-spacing精准调控间距。

table 默认不显示垂直线，因为 border-collapse: collapse

直接写 <table border="1"> 只能看到外框和横线，列之间没竖线——这不是你漏写了 <code>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> 手动加 <code>class="divider"，既难维护又容易漏掉 <th>。最稳的方式是用 CSS 选择器批量命中： <ul> <li>写 <code>table td:nth-child(3), table th:nth-child(3) { border-right: 1px solid #e0e0e0; } —— 同时覆盖表头和数据行，对齐不偏移

nth-child(n) 比 nth-of-type 更可靠，因为表格里 <th> 和 <code><td> 是同级兄弟节点，但标签名不同 <li>如果用了 <code><colgroup></colgroup>，可以试 col:nth-child(3) { border-right: 1px solid #e0e0e0; }，但 IE 不支持，慎用

rules 属性已过时，别在 HTML 表格里用

rules="cols" 看起来很省事，但它属于 HTML4 遗留属性，HTML5 中已废弃。现代浏览器虽还兼容，但行为不可控：比如在某些缩放比例下竖线会错位、无法设置颜色粗细、不响应媒体查询。更麻烦的是，它和 CSS 的 border 规则冲突，一旦同时存在，渲染结果可能随机失效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 彻底放弃：<table rules="cols"> <li>替代方案只有纯 CSS：<code>border-collapse: separate + border-right 组合
• 如果旧项目还在用 rules，迁移时注意检查所有 <th> 是否被遗漏——<code>rules 对表头的支持比对 <td> 更弱 <h3>Flex/Grid 布局里套表格，vertical divider 会失效</h3> <p>如果你的表格被包在 <code>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 的绑定关系——它们从来不是独立参数，而是一对开关。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！