table的rules属性仅控制内部单元格分隔线，不影响外边框；需配合border-collapse:collapse避免边框重叠，并用css额外设置外框。
table 的 rules 属性只控制内部单元格线，不控制外边框
rules 是 <table> 标签的原生 HTML 属性，但它和 <code>border 完全不同：它不管表格最外一圈的边框，只决定行与行、列与列之间「分隔线」是否显示。比如 rules="rows" 只画水平线（即 <tr> 之间的线），<code>rules="cols" 只画竖直线，rules="all" 才同时画横竖线。
常见误解是以为设了 rules="all" 就能替代 border —— 实际上它默认不画外框，表格整体看起来像“没包边”的网格。若要外框+内线都清晰，必须额外给 <table> 加 <code>style="border: 1px solid"。
-
rules="none"：完全隐藏所有内部线（但<th>/<code><td> 自身若有 <code>border样式仍会生效） -
rules="groups"：仅在<thead>/<code><tbody> 等分组边界处画线，需配合语义化结构 <li> <code>rules在 HTML5 中未被废弃，但浏览器支持稳定，无需 polyfill - 加了
border-collapse: collapse后，rules的线宽由border-width决定，推荐统一设为1px - 若同时用
rules和border属性，border值会被忽略（HTML5 规范中border仅保留语义含义）
为什么 rules 和 border-collapse: collapse 经常一起用
当 rules 开启后，浏览器内部仍按「分离边框模型」渲染——即每个 <td> 边框独立存在，相邻单元格之间可能有 2 像素宽的线（比如左右两个 <code>td 各画 1px 右/左 border）。这会导致视觉变粗或错位。
加 border-collapse: collapse 能强制合并这些相邻边框，让 rules="all" 真正呈现为「单像素网格线」。注意这个 CSS 必须写在 <table> 上，不能只写在 <code><td> 上。
<ul>
<li>不加 <code>border-collapse：rules="all" 可能显示为 2px 宽的「虚胖」内线
rules 在 ASP.NET Web Forms 中的特殊表现
在 HtmlTable 服务器控件（runat="server"）里，rules 不是 .NET 属性，无法通过 Table1.Rules = "all" 设置；它只能作为原始 HTML 属性写在标签里：<table id="Table1" rules="all" runat="server">。后台代码修改它必须走 <code>Table1.Attributes["rules"] = "rows"。
更关键的是：如果页面启用了 XHTML 验证（如 ），<code>rules 属于合法属性；但在纯 HTML5 文档中，它虽可用，但 IDE 或 Linter 可能标黄警告「非标准属性」——这不是错误，只是提示你优先考虑 CSS 方案。
- ASP.NET 中
HtmlTable.Border属性（int类型）和 HTMLborder属性无关，它只影响服务器端生成的border属性值，不影响rules - 若用
rules+CellSpacing="0"，可彻底消除表格内空白缝隙；但CellPadding仍需单独设，否则内容贴边 - 动态切换
rules值时，JavaScript 操作table.setAttribute('rules', 'cols')会立即生效，无需重绘
替代 rules 的现代 CSS 写法更可控
直接用 CSS 控制内线，比依赖 rules 更灵活：你可以单独设置 th 底边、td 右边，或用伪类给首行加粗线。例如：
table { border-collapse: collapse; }
th, td { border: 1px solid #ccc; }
th { border-bottom: 2px solid #333; }
td:first-child { border-left: none; }
td:last-child { border-right: none; }
这种写法绕开了 rules 的全局性限制（比如无法只让奇数列有竖线），也避免了语义混淆（rules="groups" 在无分组结构时无效）。唯一要注意的是：若表格含 colspan/rowspan，CSS 边框可能在跨格处断开，此时 rules 反而更稳——它由浏览器原生处理合并逻辑。
真正容易被忽略的点是：当你调试表格边框异常时，先检查是否误写了 rules 和 border-collapse 的组合，再看有没有其他 CSS（比如重置库里的 table { border: 0 }）偷偷覆盖了它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
