彻底隐藏HTML表格多余边框需同时设置table、th、td的border:0及border-collapse:collapse；仅设table边框无效，因th/td默认inset边框仍会渲染细缝；rules="none"不控制单元格自身边框，精准控制须用CSS选择器逐个清除；残留“假边框”常源于outline、box-shadow、背景色差异或第三方框架覆盖。
想彻底隐藏HTML表格的“多余边框”，关键不是删掉某个属性，而是理解：浏览器默认渲染的线，根本就不是一张“表边框”，而是由 table、th、td 各自的 border + border-collapse 模式共同叠加出来的视觉结果。只动一个地方，必漏线。
为什么只写 border: none 在 table 上没用？
因为浏览器 UA 样式给 th 和 td 默认加了 border-style: inset（尤其在未设 border-collapse 时），哪怕你把 table 的边框清空，单元格之间仍会因像素错位或样式 fallback 渲染出 1px 细缝——Safari 和 iOS WebView 尤其明显。
-
table、th、td三者必须同时设border: 0或border: none - 必须显式声明
border-collapse: collapse（仅作用于table元素） - 用
border: 0比border: none更稳妥，它同时清零 width/style/color，兼容旧 WebView - 别信
rules="none"——它只在border-collapse: collapse下控制“行间/列间”的内部网格线，完全不管单元格自身边框
怎么精准去掉某一边的线（比如只留上/下外框）？
真要控制“哪根线留、哪根删”，rules 属性完全无能为力，必须靠 CSS 选择器逐个击破：
- 删最后一列右侧线：
.my-table td:last-child, .my-table th:last-child { border-right: none; } - 删第一行下方线（即表头和内容区之间）：
.my-table thead tr:last-child th { border-bottom: none; } - 只保留表格上下外框：
.my-table { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: none; border-right: none; }，再配合td, th { border: none; } - 响应式场景（如手机端隐藏竖线）：
@media (max-width: 768px) { .my-table td, .my-table th { border-right: none; } }
删完还看到线？先查这四个干扰源
即使 CSS 写得全对，仍可能有“假边框”冒出来，它们不来自表格结构本身：
立即学习“前端免费学习笔记（深入）”；
-
outline：某些框架或tabindex触发的聚焦虚线，检查:focus状态下的 computed styles -
box-shadow：特别是inset阴影落在单元格边缘，看起来像内边框 - 背景色差异：相邻
td背景色不同，视觉上形成“分界线”，不是边框但像边框 - 第三方 CSS 框架类名（如 Bootstrap 的
table-bordered）覆盖了你的规则，优先级不够就得调选择器或加!important
最耗时间的从来不是写代码，而是打开开发者工具，一层层点开 computed styles，盯着 border-top、border-right、outline、box-shadow 看谁在偷偷画线——比猜快十倍。
