column-gap对<table>无效，因其仅适用于CSS多列布局（需column-count/column-width触发）或Grid/Flex容器，而表格使用border-spacing（配合border-collapse: separate）控制列间距。
column-gap 在 HTML 表格（<table>）中完全无效。
为什么 column-gap 对 <table> 不起作用
表格元素默认是 display: table，而 column-gap 只在启用 CSS 多列布局（即设置了 columns、column-count 或 column-width）的块级容器上生效。表格既不是多列容器，也不属于 Flex 或 Grid 布局，因此写 column-gap: 20px 到 <table> 或 <tr> 上会被浏览器直接忽略——不报错，也不渲染。
- 常见误操作：给
<table>加column-gap，以为能控制列宽间隙，结果毫无变化 - 真正起作用的是
border-spacing（仅对border-collapse: separate有效）或padding配合<td>/<th> - 如果强行把
<table>改成display: grid或display: flex，它就不再是语义化表格，<tr>/<td>会失去默认行为，可能破坏可访问性与样式继承
想控制表格列间距，该用什么
表格列间空白本质是单元格之间的“空隙”，控制方式取决于是否启用边框合并：
- 若使用
border-collapse: collapse（默认无间隙），只能靠<td>和<th>的padding拉开内容距离，列本身无间隙 - 若设为
border-collapse: separate，则用border-spacing控制行列间隙：border-spacing: 0 10px表示列间隙 0、行间隙 10px；border-spacing: 12px是行列都为 12px -
border-spacing不支持百分比，只接受长度值（px、em等），且不能单独设列或行间距（双值写法是标准，单值是简写） - 注意：IE 7 及更早版本不支持
border-spacing，但现代项目基本无需考虑
column-gap 能用在哪种“表格感”布局里
如果你要的是视觉上像表格、但更灵活可控的多列结构，推荐放弃原生 <table>，改用：
立即学习“前端免费学习笔记（深入）”；
-
display: grid+gap：比如grid-template-columns: repeat(4, 1fr)+gap: 16px，列间距精准、响应式友好 -
display: flex+gap+flex-wrap: wrap：适合卡片式“伪表格”，gap控制项间空白，不受 margin 合并干扰 - CSS 多列布局（
column-count）+column-gap：适用于长文本分栏（如文章、说明书），不是结构化数据表格
这三者都支持 gap 或 column-gap，但前提是布局模式得匹配——column-gap 只认多列，gap 只认 Flex/Grid。
最容易被忽略的一点：没有“表格专用间隙属性”。所谓列间隙，本质是布局模型的副产品，不是表格的内建能力。选对容器类型，比硬套属性更重要。
