rules属性必须搭配border-collapse:collapse才生效，仅设rules="all"而未设该css则无效；其值仅控制线的位置（如rows/cols/all），样式由继承的border决定；现代项目应弃用rules，改用语义化标签与css精准控制。

rules 属性必须搭配 border-collapse: collapse 才生效

写了 rules="all" 却看不到任何内部线？几乎 100% 是因为没加 border-collapse: collapse。浏览器默认用 border-collapse: separate 渲染表格，此时 rules 完全被忽略——它不是“开关”，而是“合并模式下的线策略控制器”。

• 必须显式给 <table> 加 CSS：<code>style="border-collapse: collapse"，仅写在 <td> 或外层容器上无效 <li> <code>rules 不会自动触发合并模式，也不影响外边框（外框仍由 border 或 border-width 控制）
• 嵌套表格中，每个 <table> 都要单独设置 <code>border-collapse: collapse 和 rules

  rules 的取值只控制“画哪几条线”，不控制样式

  rules 的值（none、rows、cols、all、groups）只决定是否绘制行间横线、列间竖线或分组边界线，它本身不定义颜色、粗细、虚实——所有视觉表现靠继承的 border 样式。

  • rules="rows" → 只画 <tr> 之间的横线，不碰竖线；<code>rules="cols" → 只画同列相邻 <td> 之间的竖线 <li> <code>rules="groups" 仅在真实存在的 <thead>/<code><tbody> 边界处画线；如果只有一个 <code><tbody>，哪怕有 50 行，也不会出现任何线 <li><code><td> 自身若有 <code>border，会覆盖 rules 的线宽和颜色；想统一风格，得清空单元格边框，再靠 border-collapse: collapse + 继承的 border 控制

    Chrome/Safari 中 rules 显示异常不是 bug，是规范实现差异

    在 Chrome 或 Safari 里，rules="rows" 可能意外渲染出顶部外框 + 行间横线 + 底部外框，看起来像多了一圈边框。这不是 bug，而是这些浏览器把 rules 解释为“内侧线 + 外侧线”的组合，而旧 IE 或 Firefox 只画内侧线。

    

    Doc To HTML

    使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

    下载
    • 跨浏览器一致效果的唯一办法：给 <table> 显式设 <code>border: none，再单独用 CSS 给 <thead> 或 <code><tbody> 加边框 <li>ASP.NET Web Forms 中，<code>Table1.Rules = "all" 无效，必须用 Table1.Attributes["rules"] = "all"
    • 一旦需要响应式（比如小屏隐藏竖线）、主题色切换或虚线/双线等样式，rules 就彻底失效，必须切回 CSS

    现代项目里真正该怎么做

    rules 是 HTML5 中已正式弃用的属性，它没有语义、不支持无障碍、无法精细控制。所谓“控制内部隔线”，本质是结构+样式的协同问题。

    • 删掉所有 rules 属性，用 <thead>/<code><tbody> 明确语义分组 <li>用 CSS 精准控制：例如 <code>tbody tr + tr { border-top: 1px solid #e0e0e0; } 表示“表体中后续行的顶线”，隐含层级逻辑
    • 需要差异化样式（如最后一行不画线、表头下加粗线）时，rules 无能为力，只能靠 :not(:last-child) 类选择器或 class 控制

    真正容易被忽略的点：不是“怎么让 rules 生效”，而是“为什么还要用它”。除非维护老系统或发纯静态邮件模板，否则直接跳过 rules，从结构和 CSS 入手更省事、更可控、更可访问。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！