合并单元格边框“消失”是因跳过单元格未渲染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，会出双线。正确组合是：
table { border-collapse: collapse; width: 100%; }th, td { border: 1px solid #333; padding: 8px 12px; }- 确保所有
th和td的border值完全一致（宽度、样式、颜色），否则交界处会粗细突兀
针对合并单元格补人工边框
rowspan/colspan 占据的区域本身不渲染新单元格，所以它的下方或右侧边界需显式强化：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 若
<td rowspan="2">合并两行，希望底部有线 → 给它加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重构表格结构 - 保留语义化数据，仅改变呈现方式，兼顾可访问性与视觉连续性
