HTML表格布局怎么去除所有外边框-html教程-PHP中文网

只设 table 的 border: none 没用，因为浏览器 UA 默认给 th 和 td 设置了 inset 边框，且 border-collapse: separate 下相邻单元格“隐形边框”易错位抖出白线；必须同时设置 table、th、td 的 border: 0 及 table 的 border-collapse: collapse 才能彻底清除。

html表格布局怎么去除所有外边框

只设 `table` 的 `border: none` 为什么没用

因为浏览器默认给 th 和 td 也加了边框逻辑（尤其在未声明 border-collapse 时），table 上的 border: none 只管自己，不管单元格。结果就是：表格外框没了，但单元格之间还有一圈细线，甚至左右/上下多出 1px 偏移。

`border-collapse: collapse` 必须配合 `border: none` 使用

这是真正“断根”的组合。不加 collapse，某些浏览器（比如旧版 Safari 或 iOS WebKit）会保留 sub-pixel 渲染残留；加了之后，相邻单元格边框才真正合并为一条线，再统一设为 none 才能彻底消失。

必须同时作用于 table、th、td 三个选择器
推荐写法：table, th, td { border: none; border-collapse: collapse; }

如果用内联样式，

 必须搭配每个 
用 border="0" 属性行不行
可以，但仅限 HTML 层面兼容性兜底，不能替代 CSS 控制。它只影响 table 元素本身的边框，对 th/td 无效，且会被任何 CSS border 规则覆盖。

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										

仅适用于简单静态页面或老旧 CMS 输出场景
若项目用了 CSS 框架（如 Bootstrap）、重置样式（如 normalize.css），该属性大概率被无视
现代开发中建议完全放弃，统一走 CSS 方案

为什么有时加了 border: none 还有“影子线”
那不是边框，很可能是以下三种之一：


outline：聚焦态下某些浏览器（如 Firefox）会给 table 或其子元素加 outline，需额外加 outline: none


box-shadow：外部样式表或框架偷偷加了阴影，检查 computed styles 看是否有 box-shadow

父容器 background + 单元格 padding 造成的视觉错觉：比如 td 有 padding: 8px，而 table 背景是浅灰，看起来像“线”

最稳妥的做法是打开开发者工具，逐层检查 table、tr、th、td 的 computed 样式，盯住 border、outline、box-shadow、background 四个属性——漏掉任意一个，都可能让“无边框”变成幻觉。