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