column-count 不能将多列文本转为 HTML 表格，它仅对块级元素内流式文本分栏，不识别换行或制表符为行列边界；表格需 JavaScript 解析文本并手动创建 DOM 元素。
column-count 不能把多列文本转成 HTML 表格 —— 它只作用于块级元素内的**流式文本分栏**，和 <table> 的行列结构完全无关。想靠 CSS 自动把一段带分隔符的文本（比如 CSV 或制表符分隔内容）变成表格，column-count 做不到。
为什么 column-count 对表格无效
column-count 是给 <div>、<p> 这类流式容器用的，浏览器会把内部纯文本按高度切分成等宽栏，不识别换行或制表符为“行/列边界”。而 <table> 是语义化表格模型，<tr> 和 <td> 必须显式写出，CSS 无法凭空生成这些标签。
真正可行的转换路径：文本 → 数组 → DOM
要把多列文本（例如 CSV 字符串）转成 HTML 表格，必须用 JavaScript 解析并手动构建 DOM。核心步骤是：
- 按换行符
- 对每行再按分隔符（如
,、/s+/）拆成单元格数组 - 遍历数组，动态创建
<table>、<tr>、<td>并 append
示例（处理制表符分隔文本）：
const text = `姓名 年龄 城市
张三 28 北京
李四 32 上海`;
const rows = text.split('
');
const table = document.createElement('table');
rows.forEach(row => {
const cells = row.split(' ');
const tr = table.insertRow();
cells.forEach(cell => tr.insertCell().textContent = cell);
});
document.body.appendChild(table);
如果只是想让表格视觉上“看起来像多列布局”
可以对 <table> 的父容器用 column-count，但这只是把整个表格当做一个块切开 —— 表格本身结构不变，且容易导致行被错误截断（比如一行卡在两栏之间）。不推荐，除非你明确接受这种破坏性排版。
立即学习“前端免费学习笔记（深入）”；
- 表格必须设
display: inline-table或display: table（默认即可） - 父
<div>设置column-count: 2+column-gap: 1em - 但
<tr>无法跨栏，整行会被强制挤进同一栏，实际效果往往错乱
常见坑：CSV 中含逗号、换行、引号怎么办
直接 split(',') 会崩。真实场景必须用 CSV 解析器，比如：
- 前端轻量方案：用
PapaParse库（处理引号包裹、换行嵌套等） - 简单可信数据：预处理替换
" "为\n，再正则匹配字段 - 服务端更稳妥：交给后端解析后返回 JSON，前端只负责渲染
没做这步，遇到 "苹果,香蕉" 5.2 就会多出一列。
column-count 是排版工具，不是结构转换器。最容易被忽略的是分隔符歧义和特殊字符，别省掉这层校验。 
