rules属性仅在border-collapse:collapse时生效，否则被忽略；它不定义颜色线型，无法精细控制单行/列样式，现代开发应优先使用css边框。

rules 属性确实能控制表格内部线条显隐，但直接写 rules="none" 很可能没反应——根本原因不是属性写错了，而是它被浏览器静默忽略了。

为什么 rules="none" 不生效？

因为 rules 只在 border-collapse: collapse 模式下起作用，而浏览器默认用的是 border-collapse: separate。只要没显式加这条 CSS，rules 就完全不干活。

• 必须给 <table> 加 <code>style="border-collapse: collapse"（或通过 class 统一设置）
• <td> 或 <code><th> 自身若有 <code>border 样式，会覆盖 rules 的效果——rules 本身不定义颜色、粗细、线型，只决定“画不画那条线”
• 嵌套表格中，外层 rules 对内层无效，每个 <table> 都得单独设 <h3> <code>rules 各值的真实行为，不是字面意思

  别按中文名直译理解，它的语义比看起来窄得多：

  

  HTML Extract

  使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

  下载
  • rules="none"：隐藏所有内部线（<tr> 之间、同列 <code><td> 之间），但外边框仍由 <code>border 控制
  • rules="rows"：只画水平线（即行与行之间的分隔线），不是“给每行加四周边框”
  • rules="cols"：只画竖直线（同列相邻单元格之间），不是“给每列加左右边框”
  • rules="all"：横竖线都画，但仍是统一单像素网格，依赖继承的 border-color 和 border-width
  • rules="groups"：仅在 <thead>/<code><tbody>/<code><tfoot> 边界处画线，且这些标签必须真实存在 <h3>Chrome/Safari 中 <code>rules 显示异常怎么办？

    这些浏览器会把 rules 解释为“内侧 + 外侧边框”，比如 rules="rows" 可能意外渲染出顶部外框 + 行间横线 + 底部外框。

    • 这不是 bug，是 HTML5 规范已明确不推荐 rules 后的兼容实现差异
    • 解决办法是强制清除外框：table { border: none; }，再用 CSS 单独给需要的部分加边框（如 thead th { border-bottom: 2px solid #333; }）
    • ASP.NET Web Forms 中更麻烦：Table1.Rules = "all" 无效，得写成 Table1.Attributes["rules"] = "all"

    真正要精细控制，别碰 rules

    它不支持颜色、虚线、圆角，也不能单独控制某一行/列。一旦需求变复杂（比如表头下加粗线、最后一行不画线、移动端隐藏竖线），rules 就成了干扰源。

    • 用 CSS 替代更可控：tr:not(:last-child) > td { border-bottom: 1px solid #eee; }
    • 列分隔用：td:not(:last-child), th:not(:last-child) { border-right: 1px solid #eee; }
    • 响应式场景下，CSS 媒体查询能轻松切换边框策略，rules 完全做不到
    rules 现在基本只剩纯静态文档、邮件模板或老系统兼容这几种场景还值得用。其他时候，它省不了几行代码，反而埋坑。

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