合并单元格边框“消失”是因跳过单元格未渲染td/th，解决需先设table{border-collapse:collapse}，再统一th/td边框样式，并为rowspan/colspan交界处手动补border-bottom或border-left。

合并单元格时边框“断开”或“消失”，不是边框没画出来，而是被跳过的单元格位置压根没渲染任何元素——那里没有 td 或 th，自然也没边框可显示。解决的关键是：用 border-collapse: collapse 奠定基础，再手动补全交界处的视觉边框。

必须先启用边框合并模式

在 table 元素上设置：
table { border-collapse: collapse; }
这个声明不能写在 tr、td 或外层容器上，否则完全无效。它让浏览器把相邻单元格的边框“合并”成一条线，同时废掉 border-spacing（该属性在 collapse 下彻底失效）。

统一所有单元格的边框定义

只给 table 加边框，内部依然无线；只给 td 加边框，不加 collapse，会出双线。正确组合是：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• table { border-collapse: collapse; width: 100%; }
• th, td { border: 1px solid #333; padding: 8px 12px; }
• 确保所有 th 和 td 的 border 值完全一致（宽度、样式、颜色），否则交界处会粗细突兀

针对合并单元格补人工边框

rowspan/colspan 占据的区域本身不渲染新单元格，所以它的下方或右侧边界需显式强化：

• 若 <td rowspan="2"> 合并两行，希望底部有线 → 给它加 <code>border-bottom: 1px solid #333
• 若合并后右侧紧邻普通 td，而这条竖线看起来断了 → 给那个右侧 td 加 border-left: 1px solid #333
• 避免用 outline 或 box-shadow 模拟边框，它们不参与布局，缩放或打印时容易错位

响应式场景要放弃原生合并

小屏下浏览器可能忽略 rowspan/colspan，导致人工补的边框错位。此时不要尝试用 CSS 覆盖 HTML 属性（如 rowspan: 1 无效），而应：

• 在 @media (max-width: 768px) 中改用 display: grid 或 flex 重构表格结构
• 保留语义化数据，仅改变呈现方式，兼顾可访问性与视觉连续性

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