rules="rows"能隐藏纵向线条,因其语义是“仅显示行间横向线”,故自动移除列间竖线;该属性已过时,推荐用CSS的border-right:none等精准控制。

直接说结论:用 rules="rows" 确实能隐藏表格内部纵向线条(即列与列之间的竖线),但它的行为和直觉相反——它保留横向线条、隐藏纵向线条,且仅作用于 <table> 元素内部单元格之间,不影响外边框。
为什么 rules="rows" 会隐藏纵向线条?
HTML 规范里 rules 的语义是“控制哪些**内部分隔线可见**”,不是“指定要隐藏什么”。rows 表示“只显示行之间的线”(即横向线),于是浏览器自动把列之间的纵向线拿掉。这和 CSS 的 border-collapse: collapse + 单独控制 border-right 不同,它是整体策略性隐藏。
常见误解是以为 rows 指“操作行”,其实它指“让行间线生效”——生效的线才有,没被指定的线就默认不画。
- 想只看列结构(竖线保留、横线消失)→ 用
rules="cols" - 想彻底去掉所有内部分割线 → 用
rules="none" -
rules="all"和rules="groups"在现代浏览器中基本等效于默认行为,但兼容性差,不建议用
rules="rows" 的实际使用限制
这个属性早已被 HTML5 标准标记为过时(obsolete),主流浏览器虽仍支持,但存在几个硬伤:
- 无法单独控制某几列或某几行的线条,只能全表统一开关
- 不能设置颜色、粗细、虚实;所有线条都是浏览器默认的细灰线
- 和
border属性共存时行为混乱:比如border="1"和rules="rows"同时出现,外边框可能变双线,内线逻辑反而失效 - 在响应式布局或 flex/grid 嵌套中,
rules完全不生效
更可靠的做法:用 CSS 替代 rules
如果你的目标只是“隐藏纵向线条”,CSS 更精准、可维护、可复用:
<table class="no-col-lines"> <tr><td>A</td><td>B</td></tr> <tr><td>C</td><td>D</td></tr> </table>
对应 CSS:
.no-col-lines {
border-collapse: collapse;
}
.no-col-lines td,
.no-col-lines th {
border-right: none; /* 隐藏右侧边框,即纵向线 */
border-bottom: 1px solid #ccc; /* 可选:保留横向线 */
}这样做的好处:
- 可以精确到
th或特定class单元格,不用整表一刀切 - 配合
:last-child还能避免最后一列多画一条空线 - 打印、高对比度模式、暗色主题下都可控
真正容易被忽略的是:rules 是 HTML 层面的“呈现捷径”,但它绕过了样式层,一旦后续需要微调(比如导出 PDF 时加粗某条线),就得重写整个逻辑。用 CSS 虽然多写两行,但留出了所有扩展余地。

















