column-span 是 css 多列布局属性，非 html 属性，仅在父容器启用 columns/column-count/column-width 且目标为块级元素时生效，值仅支持 1 和 all，与表格 colspan 无关。

column-span 是 CSS 属性，不是 HTML 属性，不能写在 <td> 或 <code><th> 标签里。很多人搜“HTML column-span”，结果用错地方，导致样式完全不生效。 <h3>别把 <code>column-span 和 colspan 搞混

colspan 是 HTML 属性，作用于表格单元格，控制该单元格横跨几列；column-span 是 CSS 属性，只对多列布局（columns）中的元素生效，比如用 column-count: 3 分成三栏时，让某个标题横跨全部栏。

• colspan="2" 写在 <td colspan="2"> 里，浏览器解析 HTML 时就合并列 <li> <code>column-span: all 写在 CSS 里，且仅当父容器启用了多列布局（如 columns: 3 或 column-count: 3）才起作用
• 在普通表格里加 style="column-span: all" —— 完全无效，CSS 引擎直接忽略

column-span 生效必须满足两个条件

它不像 colspan 那样“写了就管用”，必须同时满足：

• 父容器设置了多列布局：至少含 columns、column-count 或 column-width 其中之一
• 目标元素是块级元素（display: block 或类似），且不是表格相关元素（<table>、<code><tr>、<code><td> 等） <p>示例：</p> <pre class="brush:php;toolbar:false;">&lt;div style=&quot;column-count: 3; border: 1px solid #ccc;&quot;&gt; &lt;p&gt;第一段文字&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow artxards&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; rel=&quot;nofollow&quot; href=&quot;/xiazai/skill5806&quot; title=&quot;html-deploy&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg&quot; alt=&quot;html-deploy&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill5806&quot; title=&quot;html-deploy&quot; class=&quot;overflowclass&quot;&gt;html-deploy&lt;/a&gt; &lt;p class=&quot;overflowclass&quot;&gt;使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。&lt;/p&gt; &lt;/div&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill5806&quot; title=&quot;html-deploy&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;h2 style=&quot;column-span: all; background: #eee;&quot;&gt;这个标题横跨全部三栏&lt;/h2&gt; &lt;p&gt;后续段落继续分栏&lt;/p&gt; &lt;/div&gt;</pre> <p>如果删掉 <code>column-count: 3，column-span: all 就彻底失效。

  column-span 的值只有 1 和 all 实用

  initial 和 inherit 理论上存在，但几乎没人用；1 是默认值，等价于不写；真正有用的只有 all。

  • column-span: all：元素独占一行宽度，打断当前分栏流，常用于小标题、分隔线
  • 没有 column-span: 2 这种写法——它不接受数字，只认 1 或 all
  • 某些旧版 Safari（）需要 <code>-webkit-column-span: all 前缀

  最容易被忽略的是：它和表格毫无关系。想合并表格列，请老老实实写 colspan；想让标题跨多栏排版，才轮到 column-span 上场。两者定位完全不同，混用只会浪费调试时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！