column-fill 对 table 完全无效，因其仅适用于 css 多列布局的块级容器；table 使用独立表格布局模型，列数由 html 结构决定，需按语义选择 div+多列、grid 或 js 分组方案。

column-fill 对

完全无效，别白费时间调试它。HTML 表格的列数由 和

的结构决定，不是靠 CSS 多列属性控制的。真要实现“多列排列”，得先分清你要的是什么：是语义化二维数据表格，还是视觉上横向分栏的内容流？两者方案完全不同。

为什么 column-fill、column-count 在

上不起作用

column-fill 是 CSS 多列布局模块的属性，只对设置了 column-count 或 columns 的块级容器（如 <div>、<code><p></p>）生效。而

使用的是独立的表格布局模型，浏览器压根不把它的子元素当多列内容来处理。

常见无效写法包括：

• <table style="column-count: 3; column-fill: balance;"> —— <code>column-count 被忽略，column-fill 更是无从谈起
• <td style="column-fill: balance"> —— </td> <td> 不是多列容器，该属性无意义<li>指望 <code>colspan 配合 column-fill 实现“自动平衡分栏”——那是误解了 colspan 的用途，它只是合并单元格，不参与内容分栏逻辑

想让线性内容视觉上分多栏？用 <div> + 多列 CSS<p>如果你实际要展示的是列表、段落、卡片等**顺序性内容**，只是希望它们像报纸一样分三栏呈现且高度均衡，那就放弃 </p> <table>，改用标准多列容器：<ul> <li>必须给容器设明确高度（<code>height 或 max-height），否则 column-fill: balance 不生效

用 column-count: 3 指定栏数，column-fill: balance 让内容尽量均匀分布

避免在子元素里用 break-inside: avoid —— 它在多列上下文中支持不稳定，尤其在 Safari 中常失效

示例：

<div class="news-columns">
  <p>第一段新闻内容...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img
														src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
													<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <p>第二段新闻内容...</p>
  <p>第三段新闻内容...</p>
</div>
<p><style>
.news-columns {
column-count: 3;
column-fill: balance;
height: 400px; /<em> 必须！ /
}
</style></p>

需要结构化行列关系（比如带表头的三列数据）？用 display: grid

如果数据天然有行/列维度（例如「姓名｜部门｜入职时间」），又想要灵活控制列宽、响应式断点、跨行跨列，display: grid 是目前最干净的选择：

• 用 grid-template-columns: repeat(3, 1fr) 均分三列，或混合单位如 150px 1fr 2fr
• 用 grid-auto-flow: row dense 控制填充顺序，避免空洞
• 表头可用 <header></header> 或语义化 <thead>，但整个结构仍是 Grid，不再依赖 <table> 渲染逻辑<li>屏幕阅读器能更好理解语义，比强行改 <code>display: table 的 div 更可靠

非要用

且必须“模拟多列内容填充”？只能靠 JS 分组

纯 CSS 没有办法让

内容按高度自动平衡到多列。兜底做法只有一条：在 JS 层把原始数据数组按目标列数手动切片。

• 例如 12 条记录 → 每列 4 行 → 生成 4 个 <tr>，每个 <code><tr> 包含 3 个 <code><td> <li>避免用 <code>rowspan/colspan 动态调整结构，DOM 更新后极易错位
• 不要给

设 height 或 vertical-align 试图“对齐底部”——表格单元格高度由整行内容决定，强控反而破坏一致性

最容易被忽略的一点：很多人反复调 column-fill 的值，却没意识到问题根源不在属性本身，而在选错了布局模型。表格不是视觉分栏工具，就像锤子不适合拧螺丝——不是它不行，是它根本没设计这个功能。