响应式表格中colspan和rowspan本身不会失效，但常因css重排（如display: block）、媒体查询未同步调整、隐藏行破坏结构完整性等原因导致合并效果错位或崩塌。
响应式表格里用 colspan 和 rowspan 会失效吗？
不会失效，但效果常被破坏——根本原因不是属性本身失效，而是响应式断点下表格结构被 CSS（如 display: block）强行重排，或媒体查询中未同步调整 colspan/rowspan 值，导致合并逻辑错位。
典型现象：桌面端正常合并的 <td colspan="2">，在手机上变成内容溢出、列宽崩塌，甚至出现空白列。
<ul>
<li>确保合并逻辑只作用于原始 HTML 结构，不依赖 JS 动态计算（除非你明确控制断点重绘）</li>
<li>避免在媒体查询中把 <code>table 设为 display: block 后还保留原 colspan；此时语义已丢失，浏览器无法解析跨列关系
overflow-x: auto 包裹），colspan/rowspan 可照常使用，但需额外加 white-space: nowrap 防止单元格内文本折行撑破合并范围移动端优先时，colspan 值该设成多少才安全？
没有“安全值”，只有“可控值”：必须和实际列数严格匹配，且不能依赖视觉估算。比如表格在小屏下只显示 3 列，那 colspan="3" 是合理的；若写成 colspan="4"，而第 4 列被 CSS 隐藏（display: none），浏览器仍会按 4 列分配空间，造成右侧留白或错位。
- 始终以
<thead> 中 <code><th> 的实际数量为准，而不是设计稿列数 <li>如果用 <code>@media (max-width: 768px)隐藏某些列，请同步用 JS 移除对应colspan值，或改用服务器端/构建时条件渲染 - 测试时直接检查 DOM：右键审查元素，确认
colspan属性值与当前可见列总数一致 - 隐藏行时，优先用
visibility: collapse（对<tr> 有效），它能保持表格行计数逻辑，<code>rowspan仍可正确计算跨越 - 绝对不要对
<tr> 使用 <code>display: none+rowspan混合；浏览器会跳过该行参与布局，但rowspan还在引用它，结果就是下方内容整体上移、错位 - 真要适配多端复杂布局，建议放弃纯 HTML 表格，改用 Vue/React 的虚拟滚动表格组件，它们内部用 CSS Grid +
grid-row模拟rowspan，可控性高得多 - 适合仅用于展示、无数据导出/屏幕阅读器需求的后台报表页
- 必须手动维护列宽比例（如
grid-template-columns: 1fr 2fr 1fr），无法像原生表格那样靠内容自适应 - 打印时默认不触发分页优化，需额外写
@media print规则强制还原为table结构 - 如果你的用户需要复制粘贴表格到 Excel，这种方案会失败——剪贴板只识别真实
<table> DOM <p>真正难的不是怎么合并，而是判断该不该在响应式场景下合并：多数时候，简化列数、折叠次要字段，比强行合并更可靠。</p> </table>
用 rowspan 合并时，为什么小屏下经常错行？
因为 rowspan 依赖行顺序和结构完整性。响应式场景下常见两个破坏点：一是用 CSS 隐藏某行（display: none），但没删掉被 rowspan 跨越的那行 <tr>；二是用 <code>flex 或 grid 模拟表格布局，完全绕过了 HTML 表格模型，rowspan 在这种结构里毫无意义。
有没有不写 colspan/rowspan 的替代方案？
有，但代价明确：语义弱化、可访问性下降、打印样式不可靠。例如用 div + display: grid 拼一个“看起来像表格”的结构，再用 grid-column/grid-row 实现合并效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
