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