彻底关闭html表格默认边框需两步：为table、th、td显式设border: none，并设置border-collapse: collapse；还需排查outline、box-shadow及ios safari的sub-pixel渲染问题。
table 元素默认边框怎么关掉
HTML 表格默认有看不见但实际存在的“边框逻辑”，尤其在没有设置 border 或用了 border-collapse 时，浏览器会按自己的规则渲染出细线。想彻底不显示线，不能只靠删 border 属性。
最直接有效的做法是两步走：
- 给
table、th、td都显式设border: none或border: 0 - 加上
border-collapse: collapse，否则部分浏览器（比如旧版 Safari）仍可能漏出 1px 分隔缝
注意：只写 border: 0 不够——某些 UA 样式会把 border-style 设为 inset，此时 border-width: 0 才真正清空视觉表现。
用 CSS class 统一控制比内联 style 更可靠
内联写 style="border: none" 看似快，但容易漏掉 th 和 td，而且无法覆盖浏览器默认的 border-collapse: separate。用 class 能一次管住整张表。
立即学习“前端免费学习笔记（深入）”；
推荐这样写：
.no-border-table {
border: none;
border-collapse: collapse;
}
.no-border-table th,
.no-border-table td {
border: none;
padding: 8px;
}如果表格嵌在富文本或 CMS 里，还可能被外层样式污染，这时加 !important 是合理选择，不是代码坏味道——毕竟目标是“线必须消失”，不是“优雅优先”。
td/th 里的内容撑出虚线？检查 outline 和 box-shadow
有时候删光了 border 还看到线，其实是别的东西在冒充：比如开发者误加了 outline（聚焦时常见），或者父容器有 box-shadow 投影落在单元格边缘，看起来像边框。
排查顺序建议：
- 打开浏览器 DevTools，选中某个
td，看Computed面板里border、outline、box-shadow是否非空 - 临时加一句
* { outline: none !important; box-shadow: none !important; }快速验证是不是它们搞的鬼 - 特别注意某些 UI 框架（如 Ant Design）会给
table默认加outline，得针对性重置
移动端 Safari 显示细白线？可能是 sub-pixel 渲染残留
在 iOS Safari 上，即使所有边框都设为 none，缩放或滚动后仍可能闪现 1px 白线。这不是 bug，是 retina 屏下 sub-pixel 对齐导致的渲染抖动。
务实解法只有两个：
- 给
table加transform: translateZ(0)强制硬件加速，多数情况能压住 - 更稳妥的是换思路：用
display: grid或flex模拟表格布局，彻底绕开table渲染管线
别迷信“完全兼容 table 语义”，如果只要视觉无边框且数据结构简单，用 div + aria-label 也能满足可访问性，反而更可控。
线是否真的消失了，得在真机上滑动、缩放、切横竖屏多试几次——CSS 里写的 none，不等于眼睛看到的 none。
