rules属性仅在border-collapse: collapse下生效，控制行/列间网格线而非单元格边框；微调须用css选择器配合语义化结构。
rules 属性不能微调单元格边框的渲染路径，它只是个粗粒度的内部线开关，且依赖 border-collapse: collapse 才生效。
为什么 rules="all" 有时完全不显示内线
根本原因：没写 border-collapse: collapse。浏览器默认用 separate 模式渲染表格，此时 rules 被彻底忽略——无论设成 rows、cols 还是 all，都无视觉变化。
-
rules只在border-collapse: collapse下起作用，且必须加在<table> 元素上，不能只加在 <code><td> 上 <li>即使写了 <code>rules="all"，若<table> 没配 <code>style="border-collapse: collapse"，就等于没写 - 部分旧版 IE 或 Chrome 会把
rules错误解释为“外框 + 内线”，导致多出一圈边框，这不是 bug，而是规范未强制对齐的结果 <table rules="all"> + <code>border-collapse: collapse本身不产生任何颜色或宽度，必须配合th, td { border: 1px solid #999 }才可见- 如果某个
<td> 单独写了 <code>style="border-right: none"，它会覆盖rules="all"的效果——rules没有优先级，纯属底层开关 - 嵌套表格中，每个
<table> 都要单独设置 <code>rules和border-collapse，父表的设置不会继承给子表真正需要微调渲染路径时该怎么做
想控制某一行顶部有没有线、某一列右边要不要虚线、表头和数据区交界处加双线——
rules完全做不到。它没有选择器、不支持响应式、无法对接 ARIA 或屏幕阅读器。- 用
<thead>/<code><tbody> 明确结构，再写 <code>tbody tr:first-child { border-top: 2px double #333 } - 给关键行加 class：
<tr class="total-row">，再用 <code>.total-row { border-top: 1px solid #000; border-bottom: 1px solid #000; } - 隐藏特定列右侧边框：
td:nth-child(3) { border-right: none }，这比rules="cols"精准得多 - 需要无障碍支持？
rules对scope、headers或role="rowgroup"零影响，必须靠结构 + CSS + ARIA 联动
别指望
rules做精细控制。它是个遗留开关，不是渲染路径调节器。真要微调，CSS 选择器才是唯一可靠路径。 - 用
rules 的取值到底控制什么线
rules 不控制单个 <td> 的四边，只决定行与行、列与列之间是否画一条分隔线——它是“网格线策略”，不是“单元格边框控制器”。
<ul><li>
<code>rules="rows" → 只画 <tr> 之间的横线（即每行下方一条线），不碰竖线
<li>
<code>rules="cols" → 只画同列相邻 <td> 之间的竖线（即每列右侧一条线），不碰横线
<li>
<code>rules="groups" → 只在 <thead>/<code><tbody> 边界处画线，但前提是这些标签真实存在且语义正确
<li>
<code>rules="none" → 所有内部线消失，但 <td> 自身若有 <code>border 样式，仍会显示
rules 和 border-collapse: collapse 的协作陷阱
加了 border-collapse: collapse 后，rules 才开始工作，但它不定义颜色、线型或粗细——所有样式由 CSS 的 border 决定，而 rules 只决定“该位置要不要画线”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
