合并单元格边框“消失”是因被跳过区域无元素渲染，需手动补全交界处边框；必须设置table{border-collapse:collapse}，并确保相邻单元格边框宽度一致。
合并单元格后边框“消失”或“断开”，不是样式没生效，而是浏览器按网格模型渲染时，被合并区域的边框被自然跳过——必须手动补全视觉连接。
为什么合并后某些边框不见了
浏览器绘制表格时，先构建逻辑网格，rowspan 和 colspan 本质是“预订”多格空间，而非“拉伸”单个单元格。被跳过的网格位置（比如被 rowspan="2" 占据的第二行同一列）不会渲染 td 或 th，因此那些位置上的边框声明完全无效。
- 常见现象：合并单元格下方/右侧出现“空白缝”，看起来像边框断开
- 错误归因：以为是
border-collapse: collapse没起作用，其实它已生效，只是没东西可“合并” - 根本原因：缺失的边框不是被覆盖，而是压根没元素在那儿画
给合并单元格加“人工边框”的实操方法
不能依赖自动继承，得用 CSS 显式指定哪些边界需要强化。关键不是加更多边框，而是精准控制“交界处”的视觉连续性。
- 对合并单元格本身加
border-right或border-bottom：比如- 给紧邻的未合并单元格补反向边框：如合并单元格右侧是普通
td，就给它加border-left: 1px solid #333- 避免用
outline：它不占布局空间，无法对齐相邻边框，容易错位- 慎用
box-shadow模拟边框：在高缩放或打印场景下可能失效配合
border-collapse: collapse的必要前提没这个声明，所有手动补边框都会被双线干扰、粗细不均，白忙一场。
- 必须写在
table元素上：table { border-collapse: collapse; }，写在td或tr上无效 -
th和td的border值必须一致：若合并单元格设border: 1px，旁边单元格也得是1px，否则交界处会突兀加粗 - 删掉
border-spacing：它在collapse下失效，但若误留且值非零，可能干扰开发者判断 - 别漏
width: 100%或min-width: fit-content：collapse 后表格可能意外收缩，导致补的边框挤成一团
响应式下合并单元格边框更难搞定
小屏强制滚动或重排结构时，
rowspan/colspan会被浏览器忽略或降级处理，人工补的边框极易错位。- 媒体查询中禁用合并：用
@media (max-width: 768px) { td[role="rowheader"], th[rowspan] { rowspan: 1; } }不可行——rowspan是 HTML 属性，无法用 CSS 覆盖 - 真实解法：小屏改用
display: grid或flex重构数据结构，放弃原生表格合并 - 如果必须保留表格，至少给合并单元格加
data-label，确保重排后语义不丢，边框问题反而次要
最常被跳过的一步：检查合并单元格是否真的“空”，还是里面塞了
- 给紧邻的未合并单元格补反向边框：如合并单元格右侧是普通
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
