在网页排版里，HTML表格用来展示结构化数据非常普遍。当我们需要把某一格数据特别强调出来，比如合计行、异常数值或者表头交叉点，往往会给它加一条明显的边框。但很多人在实际写样式时发现，自己明明写了边框，渲染出来却和旁边单元格的边框“糊”在一起，甚至完全看不见。这背后其实是表格边框模型和CSS层叠规则在起作用。
一、理解表格边框的两种模型
CSS通过border-collapse属性控制表格边框的绘制方式，它有两个值：separate（默认值）和collapse。在separate模式下，每个单元格拥有独立边框，单元格之间还有由border-spacing定义的间隙，相邻边框互不干扰，谁都不会覆盖谁。这种情况下要让某单元格边框突出非常简单，只要把它的边框设粗、设深就行。
但在collapse模式下，相邻单元格的边框会合并成一条线，浏览器需要根据一套规则决定“哪条边框胜出”。如果没搞清楚规则，你给特定单元格加的边框就可能被相邻单元格的边框覆盖。下面这段样式就是典型的折叠模型：
table {
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
}
td.highlight {
border: 2px solid red;
}
上面代码中，我们期望td.highlight显示红色粗边框，但如果相邻普通单元格也参与了边框合并，最终结果不一定如你所想，这取决于边框样式的优先级与来源顺序。
二、collapse模式下边框优先级规则
在border-collapse: collapse中，当两条相邻边框冲突时，浏览器按以下顺序决定显示哪一条：首先是边框样式优先级，hidden最高，接着是double、solid、dashed、dotted、ridge、outset、groove、inset，最弱是none；同样式时比宽度，宽者胜；宽度也相同则按单元格类型与文档顺序，后出现的胜出。
这意味着，如果你希望特定单元格边框优先显示，最稳妥的做法是让它使用比邻居“更强”的边框样式，或者更宽的宽度。例如邻居是1px solid，你用2px solid就宽度胜出；如果邻居是dotted，你用solid即使同宽也能赢。看下面例子：
<table class="demo"> <tr><td>普通</td><td class="hot">重点</td></tr> <tr><td>普通</td><td>普通</td></tr> </table>
.demo { border-collapse: collapse; }
.demo td { border: 1px dotted #999; }
.demo td.hot { border: 2px solid #e4393c; }
这里hot单元格用solid且更宽，在折叠时必定压过dotted邻居。但如果邻居也是2px solid且写在后面，就可能反客为主，因此写样式时要注意顺序或提高特异性。
三、用相对定位脱离边框合并
如果觉得琢磨边框优先级太麻烦，还可以让特定单元格“跳出”合并规则。思路是给该单元格设置position: relative，并利用伪元素或内层元素画边框，这样它显示的框线不属于表格边框合并体系，自然不会被覆盖。
下面代码在单元格内放一个绝对定位的覆盖层来模拟边框：
td.fixed-border {
position: relative;
border: none; /* 去掉原边框参与合并 */
}
td.fixed-border::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 2px solid #1677ff;
pointer-events: none;
}
这种方案优点是非常稳定，不管周围单元格怎么写都不会影响这条蓝框；缺点是伪元素边框不占布局，如果表格线要严格对齐格边，需要微调top/left等偏移。它适合做“高亮选中”这类临时强调。
四、使用box-shadow作为替代描边
另一个常见技巧是用box-shadow给单元格加“外发光”式边框。因为阴影不在边框合并机制内，它能始终显示在最上层。写法如下：
td.shadow-border {
box-shadow: 0 0 0 2px #52c41a inset;
}
上面inset让阴影向内，看起来像内边框，不会撑大单元格。相比伪元素，它代码更少且不易错位。不过box-shadow在旧版IE上支持不好，现在主流浏览器都没问题。若项目需兼容很老环境，还是用前面优先级或伪元素方案。
五、实践中的综合建议
总结一下，要确保表格特定单元格边框优先显示，先确认表格是collapse还是separate。若是separate，直接加粗加色即可；若是collapse，优先用“更强样式+更宽宽度”打赢边框合并，其次再用相对定位或box-shadow绕开合并机制。
在写样式时，建议把重点单元格的规则放在普通单元格之后，并提高选择器特异性，比如用table.demo td.hot而非单纯td.hot，减少被后来规则覆盖的风险。遇到复杂表格，打开浏览器开发者工具查看某条边框的 Computed 面板，能直观看到它最终采用了哪条规则，方便排查为何没显示。
table_bordercss_prioritycell_border修改时间：2026-08-11 19:48:33