rules="none"无效是因为未设置border-collapse: collapse，其默认值为separate；该属性已废弃，应改用CSS的border: none控制边框。
为什么加了 rules="none" 却还有内细线？
根本不是 rules 没生效，而是它压根没机会生效——rules 必须配合 border-collapse: collapse 才起作用，而浏览器默认用的是 border-collapse: separate。不写这个 CSS，rules 任何值（包括 "none"）都等于没写。
常见错误现象： 页面上依然有细线；检查 computed style 发现 border-collapse 是 separate；手动给 加 style="border-collapse: collapse" 后，细线才消失。-
rules 只在 元素上设置才有效，不能只写在 或 上
- 即使写了
rules="none"，若 自身有 border 样式（比如来自 reset.css 或框架），那条线仍会显示
- 旧版 IE（IE8 及更早）根本不支持
rules，直接忽略；Chrome/Safari 虽支持，但对 rules="groups" 解析不一致
rules="none" 和 border: none 哪个更可靠？
border: none 更直接、更可控，也更现代。rules="none" 只是关闭“内部网格线开关”，但不碰单元格自身边框；而 border: none 是命令式清除，无论线从哪来，一律不画。
使用场景差异：
- 想快速禁用所有内部线，且表格结构简单、无额外 CSS 干扰 → 可试
- 项目已用 CSS-in-JS 或 Tailwind，或需响应式控制（比如小屏隐藏内线、大屏显示）→ 必须用
th, td { border: none } 或类名控制
- 表格嵌套时，子表的
rules 不继承父表设置，但 border: none 可通过选择器精准作用到某一层
性能上没差别，但兼容性上 border: none 支持所有浏览器，rules 在 HTML5 中已被标记为 obsolete，W3C 明确不推荐新项目使用。
去掉内细线但保留外边框，怎么写？
这是 rules 完全做不到的事。rules 只管内部网格线，不管外框；它也不能单独开/关某一条线（比如只要顶边、不要右边）。必须用 CSS 精准控制。
实操建议：
- 先确保
border-collapse: collapse 已启用，避免双线干扰
- 统一清除所有单元格边框：
th, td { border: none }
- 再单独给
加外框：table { border: 1px solid #000 }
- 如果要“仅外框 + 表头下边线”，就写：
thead th { border-bottom: 1px solid #333 }，其余保持 border: none
注意：border-collapse: collapse 下，table 的 border 会和 th/td 的 border 合并渲染，所以必须清空单元格边框，否则外框可能被覆盖或加粗。
rules 属性现在还值得用吗？
不值得。它不是“过时但能用”，而是“规范已弃用 + 功能严重受限 + 无法对接现代需求”。
容易被忽略的复杂点：
-
rules 不支持媒体查询，没法做 @media (max-width: 768px) { table { rules: "rows" } } 这种响应式切换
- 它无法和
scope、headers 或 ARIA 配合，对屏幕阅读器零贡献
- 想换主题色？改
border-color 就行；想换虚线？rules 不支持 dashed，只能切 CSS
- 团队协作中，
rules 往往藏在 HTML 里，而边框逻辑分散在 HTML 和 CSS 两处，维护成本远高于纯 CSS 方案
真正该做的，是删掉所有 rules 属性，用 / 明确语义，再靠 CSS 选择器控制边框——这才是可访问、可维护、可扩展的做法。
|
| |
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
