HTML表格如何实现单线边框样式-html教程-PHP中文网

border-collapse: collapse 必须作用于 table 元素才生效，否则 td/th 边框独立渲染导致双线、错位；启用后需显式设置 td/th 边框，且 border-spacing 失效，边框合并按宽度>样式>声明顺序优先级选取。

html表格如何实现单线边框样式

border-collapse: collapse 是必须写的，不加它，border 再怎么设都大概率出双线、错位或粗边。

浏览器默认用 border-collapse: separate 渲染表格，每个 td 和 th 都有独立边框，再加上默认 border-spacing: 2px，结果就是：相邻单元格的右边框 + 右侧单元格的左边框 = 视觉双线。

目标是每个单元格交界处只有一条清晰边框，且外轮廓完整。关键不是“加多少边框”，而是“合并哪些边框”。

在 table 上声明 border-collapse: collapse
只给 td 和 th 设 border（例如 border: 1px solid #ddd），不要给 table 设内边框（除非你要额外外框）
若需加粗外边框，单独给 table 加 border，它会包在已合并的内边框之外，不会干扰网格

推荐写法：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

table { border-collapse: collapse; }
td, th { border: 1px solid #ddd; padding: 8px; }

模板（如 Bootstrap）或框架常通过高优先级选择器设置 border，仅靠 td { border: none } 会被覆盖。更麻烦的是，有些样式只作用于 th 的 border-bottom，漏掉就留一条线。

更稳妥的写法：table.no-border, table.no-border td, table.no-border th { border: none !important; border-collapse: collapse !important; }
如果模板用了 border-spacing，还需显式重置：border-spacing: 0
注意：<thead> 或 <code><tbody> 上误加 <code>border，会覆盖 th/td 的边框，造成局部缺失
虚线、圆角等进阶效果要注意什么？

想用 border-style: dashed，同样必须配 border-collapse: collapse，否则虚线段在交界处断开、错位。
- 要让所有格线都是虚线，必须同时写：table { border-collapse: collapse; } 和 th, td { border: 1px dashed #ccc; }
- 别省略 border-width，只写 border-style: dashed 不会显示（浏览器默认 medium 宽度不可靠）
- border-width 影响虚线节奏：1px 密、2px 稳、3px+ 易被误读为断点
- 加 border-radius 时，记得加 overflow: hidden，否则内部边框可能溢出圆角区域
真正难的不是写对一行 border，而是搞清哪一层 CSS 正在偷偷覆盖你写的那条线——尤其是当表头、表格容器、框架类名层层嵌套时。