如何设置HTML表格的边框合并模式？BORDER-COLLAPSE属性详解-html教程-PHP中文网

border-collapse必须写在table元素上才生效，写在tr、td、th或div上会被浏览器静默忽略；启用collapse后，相邻边框按宽度＞样式＞声明顺序优先级“竞选”胜出，且与border-spacing互斥、受display: table限制。

如何设置html表格的边框合并模式？border-collapse属性详解

border-collapse必须写在table上才生效

加了border-collapse: collapse却没反应？90%是因为写错了位置。这个属性只对

元素本身起作用，写在、

、

甚至外层

上，浏览器直接忽略——连警告都不会报。正确写法只有两种：

CSS 中：table { border-collapse: collapse; }（推荐）
行内样式：如果你用的是 Ant Design、Bootstrap 等框架，它们常在重置 CSS 里把table设为separate，务必检查 computed 样式确认是否被覆盖。临时验证可用table { border-collapse: collapse !important; }，但长期应提高选择器权重，比如.my-table { border-collapse: collapse; }。
collapse后边框怎么“选”出来的？
border-collapse: collapse不是叠加，也不是取平均，而是让相邻边框按三重优先级“竞选”出一条胜出边框：

宽度最大者胜出（2px > 1px）
样式更实者胜出（solid > dashed > dotted）
声明顺序靠后者胜出（CSS 文件中后写的规则，或更高权重的选择器）
例如：th { border-bottom: 2px solid #333; } 和 td { border-top: 1px solid #666; } 同时存在，横向线显示为2px solid #333；但如果td规则写在后面且宽度、样式都相同，它的颜色就可能覆盖th的。
注意：border: none不参与竞争，会被其他方向的边框“穿透”显示。真要清掉某边，得用border-top: 0或明确设border-top: 1px solid transparent。
为什么还有白缝、双线、错位？
不是border-collapse没起作用，而是配套设置冲突或缺失：

											
												
												
													HTML Text Extract
													从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
												
												下载
												
											
										


border-spacing和collapse互斥——只要用了前者，后者自动失效；必须删掉所有border-spacing声明（包括框架注入的）
给table设了display: block或inline-block，border-collapse会静默失效；保持display: table（默认值）才能正常工作

table自身没设border（哪怕只是border: 1px solid transparent），会导致外框“消失”，只看到内部双线错觉

th和td的border值不统一（比如一个1px，一个2px），交界处必然加粗
视觉上还有“缝隙”？那大概率是padding撑开的，不是边框间距。统一清空td, th { padding: 0; }再观察真实贴合效果。
想控制某行/某列边框，别碰tr
tr上设border在collapse模式下基本无效，浏览器不渲染它。真正起作用的是单元格自身的单边边框。
典型做法：

第一行加顶边框：tr:first-child td, tr:first-child th { border-top: 2px solid #333; }

最后一列加右边框：td:last-child, th:last-child { border-right: 2px solid #333; }

去掉外边框只留内线：table { border: none; } + td, th { border: 1px solid #ccc; }

别指望border-collapse帮你做响应式适配——它只管“怎么画线”，不管“画多宽”。小屏溢出问题得靠table { display: block; overflow-x: auto; }或媒体查询重排结构来解决。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！