column-fill 对 无效，因其仅适用于多列布局的块级容器，而表格使用独立的表格布局模型；替代方案包括 css grid、flexbox 或 javascript 数据分组。
column-fill 不能用于 HTML 表格（<table>）。
<h3>为什么 <code>column-fill 对 <table> 完全无效
<p><code>column-fill 是 CSS 多列布局（Multi-column Layout）模块的属性，只作用于设置了 column-count、column-width 或 columns 的**块级容器**（如 <div>、<code><p></p>、contenteditable 区域）。而 <table> 使用的是表格布局模型（Table Layout），两者底层渲染机制完全不同。
<p>常见误用现象包括：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul><li>给 <code><table> 直接加 <code>style="column-count: 3; column-fill: balance;" —— 浏览器完全忽略 column-fill，且 column-count 也基本不生效（除非把 display: block 强制覆盖，但此时已不是表格语义）
<td> 或 <code><tr> 上设 <code>column-fill —— 属性无意义，因为这些元素不是多列容器
column-fill: balance 能让表格“三行三列自动均匀填满”——实际那是 Grid 或 Flex 的任务，不是 columns 的场景想让表格内容“均匀分栏”，该用什么替代方案
如果你的真实需求是：把一段线性内容（比如列表项、文章段落）按视觉分栏呈现，并希望高度均衡，那就别用 <table>，改用真正的多列容器：
<ul>
<li>用 <code><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 会破坏可访问性（屏幕阅读器无法理解“列”在此处是视觉分栏而非数据维度）。
<h3>如果非得在表格里模拟“平衡填充”，只能靠 JS 手动拆分</h3>
<p>纯 CSS 没有办法让 <code><table> 内容按 height 均匀分布到多列。可行的兜底做法是：
<ul>
<li>把原始数据数组按目标列数做 JS 分组（如 12 条数据 → 3 列 × 4 行），再生成对应 <code><tr><td>...</td></tr>
rowspan/colspan 动态调整，否则 DOM 变更后表格结构极易错乱break-inside: avoid 在 <td> 里起作用——表格单元格不参与 CSS columns 的断行逻辑
<p>真正容易被忽略的点：很多人花半天调试 <code>column-fill 在表格上的表现，却没意识到问题根源是选错了布局模型。表格不是用来做视觉分栏的，就像螺丝刀拧不开瓶盖——不是工具不好，是用错了地方。
