colspan和rowspan必须严格匹配行列总数：colspan="n"使单元格横跨n列，该行其余单元格需相应减少；rowspan="n"使单元格纵跨n行，后续n−1行对应列必须留空，二者共用时被覆盖的所有单元格须彻底删除。
table 中的 colspan 和 rowspan 怎么用才不乱？
多栏排版本质是单元格合并，不是靠 CSS 拉伸实现的。直接写 width 或 flex 在 | 里基本无效，浏览器会按表格算法重算布局。 关键在 colspan（横向跨列）和 rowspan（纵向跨行）属性，必须加在 或 上，且需严格匹配行/列总数：-
colspan="3" 表示该单元格占满当前行连续 3 列，它后面那行就得少写 2 个 ，否则表格结构错位
-
rowspan="2" 表示该单元格向下延伸 1 行（即占当前行 + 下一行同一列），下一行对应位置必须跳过这个
- 常见错误：
colspan 值超过当前行总列数，或 rowspan 跨出表格末尾，会导致渲染异常甚至整表塌陷
如何让文字在 | 里自动换行并撑开多行？ 默认情况下， 内长文本会溢出或强制单行显示，尤其在固定宽度表格中。解决方法不是加 white-space: normal（它只对空格生效），而是组合以下 CSS：- 给
加 word-break: break-word 或 word-break: break-all（前者优先保词义，后者强制断任意字符）
- 确保父级
有明确宽度（如 width: 100%），否则 break-word 可能不触发
- 避免同时设
white-space: nowrap —— 这个属性会直接禁用所有换行行为
- 若内容含长英文单词或 URL，
overflow-wrap: break-word 比 word-break 更稳妥
用 display: table-cell 模拟表格排版有什么坑？
当需要更灵活控制（比如响应式多栏文本+非表格语义），有人用 div + display: table-cell 替代原生 。但实际落地时容易忽略三点：
- 父容器必须设
display: table，且不能是 inline 元素（如 table-cell 失效
-
vertical-align 默认是 baseline，多行文本对齐常错位，建议显式设为 top 或 middle
- IE11 及更早版本对
table-cell 的 padding 和 border-spacing 支持不稳定，优先用原生 更省心
响应式场景下多栏文本怎么自适应列数？
纯 HTML 表格无法动态增减列数，colspan 是静态值。真要响应式分栏，得放弃 结构，改用 CSS Grid：- 把内容放在一个
里，每个段落用 包裹
- CSS 设
display: grid + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，就能根据容器宽度自动调整列数
- 如果仍需表格语义（比如屏幕阅读器支持），就别硬套 Grid —— 语义和布局不可兼得时，优先保语义，用 JS 动态生成不同
colspan 的表格更可靠
真正麻烦的不是怎么写，而是判断：这段多栏文本是否必须是表格语义？如果不是，别碰
|
|
|
|
|
| |
|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
