table { columns: 3 } 不生效，因为 使用表格格式化上下文（tfc），与 columns 要求的块级文本流冲突；强制 display: block 会破坏语义和结构，正确做法是转为 或 grid 布局。
columns 不能直接用于 <table> 元素实现垂直分栏——浏览器会忽略该声明，因为 <code><table> 是原子替换元素，不支持 CSS 多列布局的文本流分栏机制。
<h3>为什么 table { columns: 3 } 不生效</h3>
<p>根本原因是：<code><table> 的渲染模型与 <code>columns 要求的「块级文本流」冲突。浏览器对 <table> 应用的是表格格式化上下文（TFC），它完全绕过常规的块流分栏逻辑。即使强制设 <code>display: block，也会破坏表格语义和内部结构（如 <tr> 不再自动换行、<code><td> 高度塌陷），导致行列错位、边框断裂、表头错乱等不可控问题。
<p>常见错误现象：<code>column-count: 3 完全无视觉变化；加了 border 后发现容器高度为 0；调试时看到 <tbody> 内容被截断或堆叠在第一列。
<ul><li>不要给 <code><table> 或其直接子元素（<code><thead>、<code><tbody>）设 <code>columns
display: block + columns “欺骗”浏览器——它会让 <tr> 变成普通块，失去行内盒行为，<code>vertical-align 失效，合并单元格（rowspan/colspan）彻底崩溃
<ul></ul> 或 <div> + <code>columns，而非硬套 <table>
<h3>想让表格数据垂直分栏？先转成语义正确的流式结构</h3>
<p>真正可行的路径是：放弃原生 <code><table>，把数据提取为扁平化列表，再用 <code>columns 分栏。这不仅解决分栏问题，还提升可访问性与响应式适应力。
实操建议：
- 服务端或 JS 将表格数据转为
<ul class="data-list"> <li>{item}</li>...</ul>结构 - CSS 只需一行：
.data-list { columns: 3; column-gap: 1rem; } - 若需保留表头信息，可在每个
<li>内嵌套<dl></dl>或<div class="row"> 模拟字段，避免用 <code><table> 套 <code><table> <li>注意：<code>columns按内容高度自动平衡，不是按行数均分——12 条数据在 3 列中可能分布为 4/4/4，也可能 5/4/3（取决于每项内容高度）
真要保表格语义？用 grid 替代 columns 实现“视觉等高列”
如果必须保留 <table> 标签（例如 CMS 输出、遗留系统），又需要类似分栏的横向展开效果，唯一可靠方案是用 <code>display: grid 模拟列布局，但需重构 DOM 层级——把每列数据提为独立 <div> 块，而非依赖 <code><tr> 行结构。
<p>示例结构：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="overflowclass">HTML Extract</a>
<p class="overflowclass">使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a rel="nofollow" href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<pre class="brush:php;toolbar:false;"><div class="table-grid">
<div class="col">
<h3>姓名</h3>
<div>张三</div>
<div>李四</div>
</div>
<div class="col">
<h3>年龄</h3>
<div>25</div>
<div>31</div>
</div>
<div class="col">
<h3>城市</h3>
<div>北京</div>
<div>上海</div>
</div>
</div></pre>
<p>CSS：</p>
<pre class="brush:php;toolbar:false;">.table-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.col > div {
padding: 0.25rem 0.5rem;
border: 1px solid #ddd;
}</pre>
<ul>
<li>这种写法下，各列高度由最高项决定，天然等高</li>
<li>避免在 <code>.col 上设 height 或 flex，否则干扰 grid 自动行高计算
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，比 media query 切换 column-count 更稳定最易被忽略的一点：所谓“表格分栏”，本质是混淆了「数据语义」和「展示形式」。浏览器不会帮你把二维表格强行掰成垂直流，它只尊重你写的结构。选对容器，比调一百个 hack 更省时间。
