rules属性仅控制表格内部行列分隔线，不控制外边框；需配合border-collapse:collapse生效，取值none/rows/cols/all/groups，现代开发推荐用css替代。
rules属性只控制单元格间分隔线，不控制外边框
rules 是 <table> 的原生 HTML 属性，但它作用范围很窄：仅影响行与行、列与列之间的内部线条（即单元格边界），完全不影响表格最外层的边框。很多人误以为设 <code>rules="none" 就能“去掉整个表格边框”，结果发现外框还在——这是因为外边框由 border 或 frame 控制，和 rules 无关。
用rules隐藏横向或纵向分隔线的正确写法
常见需求是只留横线或只留竖线，比如做数据列表时想突出列对齐、或做时间轴时想强调行顺序。这时 rules 确实管用，但参数含义容易记反：
-
rules="rows"→ 显示**横向**分隔线（即在<tr> 之间画线，隐藏列间竖线） <li> <code>rules="cols"→ 显示**纵向**分隔线（即在<td> 左右之间画线，隐藏行间横线） <li> <code>rules="none"→ 所有单元格间线条全隐藏，只剩外框（如果外框没关，它还在） -
rules="all"→ 恢复默认网格状分隔线（等价于不写rules） - 浏览器兼容性没问题，但语义弱——
rules是纯表现型属性，和 HTML5 “内容与样式分离” 原则冲突 - 无法单独控制某一行/某一列的线条，粒度太粗
- 一旦用了 CSS 的
border-collapse: collapse，rules会失效或行为不可预测 - 没法配颜色、虚实、圆角等样式，而 CSS 的
border可以精确到每个方向：border-left: none、border-bottom: 1px dashed #ccc - 统一清空所有单元格边框：
th, td { border: none; }，再逐个加回需要的 - 用方向性声明：
td:first-child { border-right: none; }去掉首列右边框 - 配合伪类：
tr:last-child td { border-bottom: none; }去掉最后一行下边框 - 外边框单独处理：
table { border: none; }或table { border: 0; }（注意：后者在部分旧浏览器中可能不生效）
示例：<table rules="cols"><tr>
<td>A</td>
<td>B</td>
</tr></table> 只会在 A 和 B 之间显示一条竖线，上下无横线。
为什么现代项目几乎不用rules属性
原因很实际：
所以除非维护老系统或需极简内联控制，否则直接用 CSS 更可靠。
真正要隐藏“特定边框”该怎么做
比如只去 top border、只留 bottom border、或者让第一行 th 没下边框——这些 rules 完全做不到，必须靠 CSS：
关键点：HTML 属性是全局开关，CSS 才是精准手术刀。别指望 rules 干超出它设计范围的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
