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