rules属性无效的根本原因是缺少border-collapse: collapse；浏览器默认separate模式下rules被完全忽略，必须显式设置该css才生效，且rules不控制外框、不定义颜色线型，仅决定行/列间网格线分布。
rules属性为什么加了却没效果？
根本原因几乎总是：border-collapse: collapse 缺失。浏览器默认用 border-collapse: separate 渲染表格，此时 rules 完全被忽略——哪怕写成 rules="all" 也毫无反应。
- 必须显式给
<table> 加 CSS：<code>style="border-collapse: collapse"，rules才开始工作 -
rules不会自动触发合并边框模式，也不影响外边框（外框需单独用border控制） - 如果
<td> 自己写了 <code>border样式，它会覆盖rules的线宽和颜色（rules本身不定义颜色、线型或粗细） - 嵌套表格中，每个
<table> 都得单独设 <code>rules和border-collapse: collapserules="rows"、"cols"、"all" 到底画什么线？
rules控制的是“行与行之间”“列与列之间”的分隔线，不是单个单元格的四周边框。它的取值只决定网格线的分布策略：-
rules="rows"→ 只画水平线（即每行下方一条线），列方向无竖线 -
rules="cols"→ 只画竖直线（同列相邻<td> 之间），行方向无横线 <li> <code>rules="all"→ 横竖线都画，但仍是统一像素的网格，不是外框 -
rules="groups"→ 仅在<thead>/<code><tbody> 边界处画线，前提是这些标签真实存在且语义正确 <li> <code>rules="none"→ 所有内部线消失，但<td> 若有自身 <code>border，仍会显示Chrome/Safari 中 rules 显示异常怎么办？
这些浏览器会把
rules解释为“内侧边框 + 外侧边框”，导致意外多出一圈外框。例如rules="rows"可能同时渲染顶部外框、行间横线、底部外框。- 这不是 bug，而是 HTML5 规范未强制对齐旧 IE 行为的结果
- 必须额外用 CSS 清除外框：
table { border: none; }，再单独给<thead> 或 <code><tbody> 加边框 <li>ASP.NET Web Forms 中更麻烦：<code>Table1.Rules = "all"无效，得写成Table1.Attributes["rules"] = "all" - 用
tbody tr + tr { border-top: 1px solid #e0e0e0; }控制行间线 - 用
td:not(:last-child) { border-right: 1px solid #ddd; }控制列间线 - 给关键行加 class：
<tr class="summary-row">，再用 <code>.summary-row { border-top: 2px double #333; } - 响应式场景下，CSS 媒体查询比
rules灵活得多
真正需要精细控制时，该用什么替代？
rules不支持颜色、虚线、圆角，也无法单独控制某一行/列。一旦要差异化样式（比如表头下加粗线、最后一行不画线），就得切回 CSS：现代项目里，
rules的价值基本只剩纯静态文档、邮件模板或遗留系统兼容——它是个可用但不宜深绑的过渡方案。真正容易被忽略的，是它和border-collapse: collapse的强耦合关系，以及对语义结构（<thead>/<code><tbody>）的隐式依赖。</tbody>
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
