HTML表格不能实现瀑布流布局，因其DOM结构受浏览器严格约束，<tr>只能包含<td>/<th>，无法纵向分列；正确方案是CSS多列布局（column-width）或JavaScript动态分配元素。
HTML表格本身不能实现瀑布流布局，强行用 <table> 模拟只会导致结构错乱、语义错误、响应式失效——这不是“技巧问题”，而是根本违背 HTML 表格的设计意图。
为什么 table 不能做瀑布流
表格的 DOM 结构受浏览器严格约束：<tr> 只能直接包含 <td> 或 <th>；<table> 必须嵌套在单元格内，不能跨行或跨列自由流动。瀑布流要求元素按高度动态分配到不同“列”，而表格行（<tr>）是横向整行渲染的，无法拆解成纵向分列的容器。
常见翻车现象包括：
-
<tr><table>...</table></tr>被浏览器自动移到<table>外部，子表格脱离预期位置 - 用
float或display: inline-block强行“模拟列”，但<tr>会强制换行，破坏连续流式排列 - 设置
width属性或table-layout: fixed后，列宽被锁死，无法响应内容高度变化
嵌套表格只能放 <td> 里，不是“瀑布流”
嵌套表格只是把一个完整表格塞进某个单元格，它解决的是“表格内展示明细数据”的问题，和瀑布流无关。它的作用域被严格限制在单个单元格边界内，无法跨越多行形成纵向列流。
立即学习“前端免费学习笔记（深入）”；
正确做法只有一条路径：
- 子表格必须完整写在
<td>或<th>标签内部，不能包裹在<tr>下 - 给子表格加独立类名（如
class="detail-table"），重置border-collapse: separate、width: 100%和单元格内边距，避免继承父表样式 - 不要指望嵌套表格撑开父
<td>高度来“对齐其他列”——每行高度由该行最高单元格决定，无法形成错落感
column-width 是 CSS 瀑布流唯一靠谱的原生方案
想用纯 HTML/CSS 实现真正意义上的瀑布流，唯一符合规范且无需 JS 的路径是 CSS 多列布局，核心就是 column-width，不是 column-count。
关键实操点：
- 父容器必须有明确宽度（
width、max-width或处于 flex/grid 子项中），否则column-width无参照，退化为单列 - 只设
column-width: 250px+column-gap: 12px，禁用column-count和columns缩写 - 卡片元素必须是块级（
<div>默认满足），不能是inline-block、float或position: absolute - 加
break-inside: avoid和page-break-inside: avoid，双保险防卡片被截断 - 图片务必设
display: block，否则底部空白会干扰列高计算
真要动态控制列高，就得放弃 table
如果业务需要根据图片加载后真实高度动态分配元素（比如 Pinterest 那种精准对齐），就必须用 JavaScript 维护列高数组，把每个新元素插入当前最短列。这个逻辑与 <table> 完全不兼容——你得用 <div> 做容器，用 getBoundingClientRect() 或 offsetHeight 获取真实尺寸，再通过 appendChild() 或 insertAdjacentElement() 手动插入。
容易被忽略的点：图片加载完成前占位高度为 0，会导致布局错乱；滚动加载更多时，必须重新计算所有列高，不能只追加；resize 事件需节流，否则频繁重排影响性能。
