col必须嵌套在colgroup中且为table直接子元素，位置须在caption后、thead前；col数量须与实际列数严格一致；width必须用css设置并配合table-layout: fixed和明确table宽度。

col 必须嵌在 colgroup 里，且位置不能错col 标签本身不渲染任何内容，但它必须作为 colgroup 的直接子元素存在，而 colgroup 又必须是 table 的**直接子元素**，且必须出现在 caption（如果有）之后、thead 或第一行 tr 之前。

• 放到 tbody 里？浏览器完全忽略，DevTools 里都看不到它
• 放在 thead 后面？样式静默失效，列宽控制归零
• 没包 colgroup 直接写 <col>？HTML 解析失败，部分浏览器会自动补全但行为不可控

正确结构顺序只能是：

......

...

col 数量必须和实际列数严格一致 每个 col 按顺序一一对应表格中的一列。少一个，最后一列就失去控制；多一个，多余 col 完全无效，也不报错。

• 动态生成表格时（比如 Vue/React 渲染），col 数量必须实时匹配 th/td 的数量
• 使用 span="2" 并不等于“分配两列宽度”，而是让这个 col 影响第 1 列，第 2 列仍按默认逻辑算——真要两列等宽，就得写两个 <col style="width: 100px">
• 表头有合并列（colspan）不影响列计数：列数仍以最宽一行的单元格总数为准

width 必须用 CSS 写，且 table-layout: fixed 不可省略col width="120" 在 HTML5 中已被明确废弃，所有现代浏览器都会忽略它。

• ✅ 正确写法：<col style="width: 120px"> 或 <col class="col-price"> + .col-price { width: 120px; }
• ❌ 错误写法：<col width="120">、<colgroup width="100%"></colgroup>

但仅设 width 还不够：

• 必须加 table { table-layout: fixed; }
• 同时确保 table 有明确宽度（如 width: 100% 或 width: 800px），否则百分比值无法计算

没有这两条，col 的宽度设置就是摆设，浏览器仍走 auto 布局，反复测量内容长度来分配列宽。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

col 支持的 CSS 属性非常有限，别指望它管文字对齐col 只能控制列的“骨架”属性，不是万能样式代理。

• ✅ 支持：width、background、border（需配合 border-collapse: collapse）、visibility: collapse
• ❌ 不支持：text-align、color、font-size、padding、vertical-align

要让第 3 列文字右对齐，得写：

td:nth-child(3), th:nth-child(3) { text-align: right; }

而不是往 col 上加 style="text-align:right"——那行不通。

最容易被忽略的点：动态表格里，col 数量一旦和实际列数脱节，整个列宽控制就崩了，而且没有任何错误提示，只能靠肉眼核对或脚本校验。

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