rules="cols"不起作用的根本原因是未设置border-collapse: collapse，且td/th的显式border会覆盖rules；其真实含义是仅显示纵向线，而非隐藏竖线。
为什么 rules="cols" 不起作用
直接写 <table rules="cols"> 却发现竖线还在？根本原因是 rules 属性只在 border-collapse: collapse 模式下才生效，而浏览器默认是 separate。没加这句 CSS，rules 就被完全忽略。
更隐蔽的问题是：<td> 或 <th> 上若有显式的 border 样式（比如 border: 1px solid #ccc），会直接覆盖 rules 的效果——它本身不定义颜色或粗细，只决定“画不画那条线”。
- 必须给
<table>加style="border-collapse: collapse"或对应 class -
rules="cols"的真实含义是：只显示纵向线（即列与列之间），不是“隐藏竖线”——这是最常见的语义误解 - 想隐藏竖线，该用
rules="rows"，但依然要配合border-collapse: collapse
用 CSS 精确控制竖线：只关 border-right
比起 rules，直接操作单元格边框更可靠、更可控。隐藏垂直分割线，本质就是不让相邻列之间出现分隔视觉，最稳妥的方式是统一清除右侧边框。
关键点在于：只设 td, th { border-right: none; } 不够——最后一列的 td 还会多出一条右边框，得单独处理。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 通用写法：
td, th { border-right: none; }+td:last-child, th:last-child { border-right: 1px solid transparent; }（避免高度塌陷） - 如果只要数据行去竖线、表头保留，就分开写：
thead th { border-right: 1px solid #333; }和tbody td { border-right: none; } - 注意不要漏掉
th，否则表头列之间仍可能有线
响应式场景下竖线要动态开关怎么办
比如桌面端显示完整网格，移动端只留横线。这时 rules 完全无能为力，只能靠媒体查询 + CSS 边框控制。
竖线开关本质是控制 border-right 的有无，所以响应式逻辑非常直接：
- 默认关闭竖线：
td, th { border-right: none; } - 桌面端开启：
@media (min-width: 768px) { td, th { border-right: 1px solid #eee; } } - 如果某列始终需要竖线（如操作列），加单独类：
<td class="keep-vline">，再写.keep-vline { border-right: 1px solid #999; }
容易被忽略的兼容细节
有些老系统或邮件模板里还用 rules，但现代开发中真正卡住人的，往往是那些“看不见”的继承样式。
比如 Bootstrap 的 .table 类默认带 border-right，或者某些 UI 库给 td 设了 outline，甚至 iOS Safari 在 sub-pixel 渲染下会漏出 0.5px 竖线。
- 用浏览器 DevTools 的 Computed 面板查
border-right的最终值，别只看 Styles 面板 - 清空所有边框时，建议写全：
table, th, td { border: 0; border-right: none; }，避免遗漏 - 若用
border: 0后仍有线，试试border-right: 0 solid transparent——某些 UA 样式对none处理不一致
