Bootstrap表格中colspan无响应式降级，需用display:table-cell+媒体查询模拟或CSS Grid替代；语义与可访问性须通过ARIA属性补全。
Bootstrap 表格本身不支持 colspan 的响应式自动降级
直接写 <td colspan="3"> 在 Bootstrap 表格里能渲染，但「响应式」不是自动发生的——当屏幕变窄、表格进入 .table-responsive 滚动容器时，colspan 依然按原始列数撑开，容易导致横向溢出或内容挤压变形。这不是 Bootstrap 的 bug，而是 HTML 表格模型的固有行为：CSS 无法动态修改 colspan 属性值。
用 display: table-cell + 媒体查询模拟跨列效果
真正可控的方式是放弃原生 <table> 结构，在小屏下把行内多个单元格「视觉合并」：用 display: table-cell 模拟表格单元格行为，再配合 @media 控制是否合并。
- 给需要合并的单元格外层加一个
<div class="merged-cell">，里面放原本要跨列的内容 - 默认（大屏）下设为
display: table-cell; width: 100%，让它占满整行 - 在中屏以上（如
@media (min-width: 768px)）恢复为display: table-cell并设固定宽度，与相邻单元格对齐 - 避免用
float或flex直接套表格行，会破坏<tr><td>的语义和可访问性
@media (max-width: 767.98px) {
.merged-cell {
display: table-cell;
width: 100%;
padding: 0.5rem;
}
}
@media (min-width: 768px) {
.merged-cell {
display: none; /* 隐藏合并版，让原生 td 显示 */
}
.normal-row td:nth-child(2) {
display: table-cell;
}
}更稳妥的做法：用 grid 替代 table 实现语义化跨列
如果表格数据不要求严格语义（比如不是财务报表、无障碍要求不高），直接用 CSS Grid 更灵活。Bootstrap 5+ 已内置 .d-grid 和 gap 工具类，可快速构建响应式「类表格」布局。
- 每行用
<div class="row">包裹，子项用<div class="col">或自定义grid-column - 跨列时对目标项加
grid-column: 1 / -1（从第一列到最后一列） - 用
@media调整grid-template-columns，比如小屏下改为1fr单列，跨列项自然独占一行 - 注意：Grid 不支持
thead/tbody语义，若需打印或屏幕阅读器支持，得额外加role="table"等 ARIA 属性
别忽略 screen reader 和打印场景下的表现
用 CSS 隐藏/重排实现的「视觉跨列」，对读屏软件来说仍是独立 DOM 节点。如果合并内容有逻辑关联（比如「合计：¥12,345」对应前三列数据），必须用 aria-describedby 显式绑定关系，否则视障用户会丢失上下文。
立即学习“前端免费学习笔记（深入）”；
- 不要只依赖视觉对齐，用
aria-label或aria-labelledby补充说明 - 打印样式表（
@media print）里记得重置grid或table-cell行为，否则可能错行或截断 - 真需要语义+响应式+跨列？老实用服务器端或 JS 根据 viewport 动态生成两套 DOM（桌面版 table + 移动版 card 列表），比纯 CSS 折中方案更可靠
跨列响应式的难点不在怎么“看起来合并”，而在“信息关系不丢失”。CSS 能做的只是视觉适配，语义链得自己补全。
