rules="cols"不起作用的根本原因是未设置border-collapse: collapse，且td/th的显式border会覆盖rules；其真实含义是仅显示纵向线，而非隐藏竖线。

为什么 rules="cols" 不起作用

直接写 <table rules="cols"> 却发现竖线还在？根本原因是 <code>rules 属性只在 border-collapse: collapse 模式下才生效，而浏览器默认是 separate。没加这句 CSS，rules 就被完全忽略。

更隐蔽的问题是：<td> 或 <code><th> 上若有显式的 <code>border 样式（比如 border: 1px solid #ccc），会直接覆盖 rules 的效果——它本身不定义颜色或粗细，只决定“画不画那条线”。

• 必须给 <table> 加 <code>style="border-collapse: collapse" 或对应 class
• rules="cols" 的真实含义是：只显示纵向线（即列与列之间），不是“隐藏竖线”——这是最常见的语义误解
• 想隐藏竖线，该用 rules="rows"，但依然要配合 border-collapse: collapse

用 CSS 精确控制竖线：只关 border-right

比起 rules，直接操作单元格边框更可靠、更可控。隐藏垂直分割线，本质就是不让相邻列之间出现分隔视觉，最稳妥的方式是统一清除右侧边框。

关键点在于：只设 td, th { border-right: none; } 不够——最后一列的 td 还会多出一条右边框，得单独处理。

• 通用写法：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 边框控制。


html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载

竖线开关本质是控制 border-right 的有无，所以响应式逻辑非常直接：

• 默认关闭竖线：td, th { border-right: none; }
• 桌面端开启：@media (min-width: 768px) { td, th { border-right: 1px solid #eee; } }
• 如果某列始终需要竖线（如操作列），加单独类：<td class="keep-vline">，再写 <code>.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 处理不一致

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