column-fill 对 <table> 无效，因其仅适用于多列布局的块级容器，而表格使用独立的表格布局模型；替代方案包括 CSS Grid、Flexbox 或 JavaScript 数据分组。
column-fill 不能用于 HTML 表格（<table>）。
为什么 column-fill 对 <table> 完全无效
column-fill 是 CSS 多列布局（Multi-column Layout）模块的属性，只作用于设置了 column-count、column-width 或 columns 的**块级容器**（如 <div>、<p>、contenteditable 区域）。而 <table> 使用的是表格布局模型（Table Layout），两者底层渲染机制完全不同。
常见误用现象包括：
- 给
<table>直接加style="column-count: 3; column-fill: balance;"—— 浏览器完全忽略column-fill，且column-count也基本不生效（除非把display: block强制覆盖，但此时已不是表格语义） - 在
<td>或<tr>上设column-fill—— 属性无意义，因为这些元素不是多列容器 - 以为
column-fill: balance能让表格“三行三列自动均匀填满”——实际那是 Grid 或 Flex 的任务，不是 columns 的场景
想让表格内容“均匀分栏”，该用什么替代方案
如果你的真实需求是：把一段线性内容（比如列表项、文章段落）按视觉分栏呈现，并希望高度均衡，那就别用 <table>，改用真正的多列容器：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
<div class="columns">...</div>+column-count: 3+column-fill: balance+height（必须） - 若需结构化数据对齐（如带表头的行列关系），用
display: grid，例如：grid-template-columns: repeat(3, 1fr)，再配合grid-auto-flow: row dense控制填充顺序 - 若要响应式卡片墙，用
display: flex+flex-wrap: wrap，搭配justify-content: space-between
注意：<table> 的语义是二维关系型数据，强行套用 columns 会破坏可访问性（屏幕阅读器无法理解“列”在此处是视觉分栏而非数据维度）。
如果非得在表格里模拟“平衡填充”，只能靠 JS 手动拆分
纯 CSS 没有办法让 <table> 内容按 height 均匀分布到多列。可行的兜底做法是：
- 把原始数据数组按目标列数做 JS 分组（如 12 条数据 → 3 列 × 4 行），再生成对应
<tr><td>...</td></tr> - 避免用
rowspan/colspan动态调整，否则 DOM 变更后表格结构极易错乱 - 不要指望
break-inside: avoid在<td>里起作用——表格单元格不参与 CSS columns 的断行逻辑
真正容易被忽略的点：很多人花半天调试 column-fill 在表格上的表现，却没意识到问题根源是选错了布局模型。表格不是用来做视觉分栏的，就像螺丝刀拧不开瓶盖——不是工具不好，是用错了地方。
