最稳定的方法是设置 table { border-collapse: collapse; } 并显式清除单元格下边框：td, th { border-bottom: none; }，而非依赖 rules="cols"。
只隐藏水平分割线，rules="cols" 为什么常失效
很多人试过 rules="cols" 想保留竖线、去掉横线，结果发现横线还在——根本原因是它只在 border-collapse: collapse 下起作用，而浏览器默认是 separate。不加这句 CSS，rules 就被完全忽略。
更麻烦的是：rules="cols" 的语义不是“只画竖线”，而是“只画列之间的分隔线”，即同列相邻 td 之间那条竖线；它对行间横线的控制是间接的，且无法干预表头与第一行之间的线、最后一行下方的线。
- 必须显式写
table { border-collapse: collapse; } -
td和th若有自身border样式（比如border-bottom），会直接覆盖rules效果 - Chrome/Safari 对
rules="cols"的渲染可能额外加顶部/底部外框，看起来像横线没去掉
用 CSS 精确控制：只清 border-bottom，保留 border-right
真正稳定的做法是绕过 rules，直接操作单元格边框。水平分割线本质就是 td 和 th 的 border-bottom，只要把它设为 none 或 0，横线就没了，竖线还能靠 border-right 单独控制。
- 清除所有横线：
td, th { border-bottom: none; } - 若需保留表头下粗线，单独加：
th { border-bottom: 2px solid #333; } - 要留最后一行底边？用：
tr:last-child > td { border-bottom: 1px solid #ccc; } - 配合
border-collapse: collapse才能确保相邻border-bottom不重叠出双线
frame 和 rules 混用会互相干扰
有人给 table 同时加 frame="void" 和 rules="cols"，以为能“外框全无 + 内部只留竖线”，结果横线又冒出来了。这是因为 frame 只管外框，但它的存在可能触发某些 UA 样式重置，间接影响内部边框继承。
-
frame属性已从 HTML5 规范中废弃，现代项目应避免使用 -
frame="void"在部分旧环境里确实能压掉外框，但它不保证单元格边框行为一致 - 如果用了框架（如 Bootstrap），它的
.table类可能自带border，会覆盖rules，优先检查 computed styles 中border-bottom的真实来源
移动端隐藏横线时要注意 sub-pixel 渲染
iOS Safari 在高 DPR 屏幕上有时会把 border-bottom: 1px solid #000 渲染成模糊的 0.5px 线，看着像没清干净；反过来，设 border-bottom: 0 也可能因 sub-pixel 计算残留视觉痕迹。
- 稳妥写法是：
border-bottom: 0 transparent;或border-bottom: 0 solid transparent; - 不要依赖
visibility: hidden或opacity: 0，它们不移除边框占位，可能影响点击区域或布局 - 若表格用于数据展示（非 UI 表格），建议用
display: grid替代，彻底脱离 table 渲染逻辑
rules，老老实实写 td, th { border-bottom: none; } 并确认 border-collapse: collapse 已生效——那些想靠一个属性偷懒的尝试，最后都得回来补 CSS。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
