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