HTML表格（<table>）无法实现瀑布流布局，因其强制二维网格结构、行内单元格高度对齐、不支持动态列高计算与元素自由插入最短列，违背瀑布流“按列高动态分配”的核心逻辑。
HTML 表格（<table>）本身无法实现瀑布流布局，强行用表格模拟只会破坏语义、增加维护成本、触发不可控的回流，且完全违背瀑布流的核心逻辑——“按列高动态分配元素”。别用表格做瀑布流。
为什么 <table> 不能用来实现瀑布流
瀑布流要求每个 item 独立参与列高计算，并能自由插入最短列顶部；而 <table> 强制按行/列二维网格组织 DOM，<tr> 必须整行渲染，<td> 宽度受同行约束，无法跨行伸缩或错位填充。
-
<tr>是行容器，所有<td>高度被该行最大单元格拉齐——结果就是每行底部强制对齐，失去“参差”感 - 想让第 5 个 item 出现在第 2 列顶部？表格里只能靠
rowspan硬撑，但会破坏后续所有行结构，响应式下彻底崩溃 -
break-inside: avoid对<td>无效，图片仍可能被截断；column-count也拒绝作用于<table>内部 - 屏幕缩放、字体变化、图片异步加载都会导致表格重绘错乱，且无法用 JS 动态更新单个
<td>位置
table 嵌套是瀑布流最大的结构陷阱
有人试图用 <table><tr><td><div class="masonry">.../td></tr></table> 包裹瀑布流容器，这反而引入新问题：
-
<table>默认display: table，会创建新的格式化上下文，干扰外部column-count的高度继承 -
<td>的vertical-align: middle（默认值）会让内部.masonry容器垂直居中，造成顶部大片空白 - 嵌套后，
.masonry > .item选择器失效，break-inside: avoid必须写成td > .item，但此时它又可能误命中表格内其他.item - 如果表格有
border-collapse: collapse，column-gap会被吞掉，列间距消失
表格数据要展示成瀑布流？先转成扁平列表
真正需要把表格数据（比如后台导出的 CSV 渲染成卡片流）做成瀑布流时，必须放弃 <table> 结构，走语义化 + CSS 布局路线：
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 把
<table>数据解析为数组，再生成扁平<div class="item">列表 —— 不是包裹在<td>里，而是直接挂到容器下 - 确保每个
.item有明确高度来源：要么预设min-height，要么用aspect-ratio控制图片容器，避免加载前高度为 0 - 列数用
column-width: 280px替代column-count: 3，让浏览器自动算列数，比硬写死更适配不同屏宽 - 若需保留表格可访问性（如排序、筛选），用
<div role="table">+role="row"/role="cell"模拟，而非真实<table>
真要用表格，就接受它是表格
如果业务强依赖表格语义（如 Excel 导入、屏幕阅读器兼容、打印样式），那就老老实实用 <table>，别硬套瀑布流：
- 用
white-space: nowrap+ 水平滚动解决宽列溢出 - 用
position: sticky固定表头，比任何“瀑布流表格”都更稳定 - 复杂交互（如展开详情行）用
<details><summary>，不碰rowspan - 性能瓶颈在大量行渲染？上虚拟滚动（
IntersectionObserver+transform: translateY()），不是改布局模型
瀑布流的本质是“列高驱动的位置调度”，表格的本质是“行列对齐的二维数据映射”。两者底层约束冲突，强行融合只会让 bug 更难定位。该拆结构时就拆，别在 <table> 里堆 hack。
