html表格无法实现瀑布流布局，因其dom结构和渲染机制不支持按列高动态分配元素；嵌套表格仅适用于层级数据展示，真瀑布流应使用column-width或js masonry方案。
HTML 表格本身不能实现瀑布流布局
瀑布流（Masonry）本质是“按列高动态分配元素”，而 <table> 的 DOM 结构和渲染机制完全不支持这种行为：<code><tr> 必须按行顺序排列，<code><td> 宽度由整行决定，无法让第 5 个单元格跳到第 2 列顶部空隙。强行用表格模拟，只会导致结构错乱、语义失效、屏幕阅读器不可读。
<p>常见翻车点：</p>
<ul><li>把 <code><table> 塞进 <code><tr> —— 浏览器自动修正 DOM，子表被踢出原位置
<li>用 <code>rowspan + 多层嵌套“假装”错落 —— 列高无法动态均衡，窄屏下严重错位
<td> 设固定高度再拼接 —— 内容溢出或留白，且响应式时完全失控
<h3>嵌套表格只能用于局部详情展开，不是瀑布流替代方案</h3>
<p>嵌套表格唯一合法场景是：在某个 <code><td> 或 <code><th> 内完整放置另一个 <code><table>，用于展示该单元格的明细数据（如“订单号”单元格里嵌一个商品列表表）。它解决的是“层级数据展示”，不是“视觉流式排列”。
<p>关键实操约束：</p>
<ul><li>子表格必须直接写在 <code><td> 内容体中，不能包裹 <code><div> 中转
<li>父表和子表必须用不同 class 隔离样式，例如 <code>class="order-table" 和 class="item-list-table"
width: 100% 即可撑满单元格，但需重置 border-collapse: separate 防止边框合并异常display: block，否则底部空白会撑高行高表格列宽控制要避开 width 属性，用 CSS 精准干预
width HTML 属性已过时，且对嵌套表格完全无效。真正可控的方式是组合使用以下 CSS：
- 主表设
table-layout: fixed—— 让列宽严格按<col>或第一行<th>/<code><td> 的宽度计算，避免内容撑开 <li>用 <code><col>标签定义列基准宽：<col style="width: 200px">或<col style="width: 25%"> - 对特定列设
min-width和max-width，防止文字过长或过短时失衡 - 长文本单元格加
word-break: break-word和white-space: normal，确保换行生效 - 动态加载、需精准列高对齐 → 手动维护列高数组：
const colHeights = [0, 0, 0]，每次插入前找Math.min(...colHeights)对应索引 - 不想手写逻辑 → 引入
masonry.js，但注意它要求容器用display: block，不能套在flex或grid里
注意：table-layout: auto 虽然默认适应内容，但在嵌套表格中极易引发父表列宽被子表内容反向撑爆，必须显式设为 fixed 并配 <col> 控制。
真要瀑布流，别碰表格，改用 column-width 或 JS Masonry
如果页面某区块需要瀑布流效果，直接放弃 <table>，换用语义正确、浏览器原生支持的方案：
<ul>
<li>静态卡片/图片列表 → 用 <code>column-width：.grid { column-width: 300px; column-gap: 1rem; } + .item { break-inside: avoid; page-break-inside: avoid; }
最易被忽略的细节：所有方案都绕不开图片异步加载问题 —— offsetHeight 在 img.onload 前为 0，JS 方案必须等图加载完再更新列高；CSS column-width 方案则依赖 break-inside: avoid 防截断，且必须确保图片设了 display: block。
