col元素是唯一语义正确且浏览器一致支持的列级控制方式，必须置于table内、thead前，与实际列一一对应；其width属性需配合table-layout:fixed生效，text-align则须设在td/th上而非col上。
给 col 元素加类并用 CSS 控制列宽和对齐
直接在 td 或 th 上写内联样式，无法保证整列统一等宽——因为单元格宽度受内容、边框、padding 和浏览器自动计算影响，容易错位。真正可控的方式是用 col 元素定义列，并配合 CSS 的 width 和 text-align。
关键点：必须把 col 放在 table 内、thead 外层，且顺序要和实际列一一对应。
-
col本身不渲染内容，但能承载样式，是唯一语义正确、浏览器一致支持的列级控制方式 - 设
width时推荐用固定值（如120px）或百分比（如20%），避免用auto或无单位数字 -
text-align必须写在td, th或更具体的类上，col不支持该属性
示例：
| 姓名 | 部门 | 薪资 |
|---|---|---|
| 张三 | 研发 | ¥18,500.00 |
对应 CSS：
.fixed-col { width: 120px; }
.amount-col { width: 140px; }
.amount-col + td,
.amount-col + th,
td.amount,
th.amount {
text-align: center;
}
为什么不能只靠 table-layout: fixed + width 在 th 上？
很多人试过给第一行 th 设 width 并开启 table-layout: fixed，结果发现第二列宽度还是被长文本撑开。这是因为：table-layout: fixed 只按第一行（或 col）计算列宽，但若后续 td 里有换行、white-space: normal 或未限制最大宽度，浏览器仍会重排。
- 必须同时设置
table { table-layout: fixed; }和col或第一行th的明确宽度 - 如果用
th定宽，需确保所有th都带width，且没有colspan打乱列序 -
table-layout: fixed下，text-align依然只对单元格生效，不影响列宽计算
金额列右对齐 + 等宽字体防小数点错位
单纯 text-align: right 对数字列不够——不同位数的数字（如 99.99 和 12345.00）在非等宽字体下小数点会浮动。解决方法是组合控制：
- 给金额列单元格加类，比如
<td class="numeric">¥12,345.00</td> - CSS 中同时设置：
.numeric { text-align: right; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } - 避免用
font-family: monospace这种泛名，优先指定系统等宽字体栈，兼容性更好 - 如果表格导出为 Excel 或打印，额外加
white-space: nowrap可防止金额被截断换行
动态生成表格时（如 T-SQL FOR XML）怎么保留列样式
T-SQL 拼 HTML 表格时，常漏掉 col 结构，导致前端无法控制列宽。根本问题不是“怎么加样式”，而是“结构缺失”。
- 不要只拼
<tr><td>...</td></tr>，必须显式插入<col>块，且数量与列数严格一致 - 在 SQL 中用
FOR XML PATH('col')拼col列表，再和thead/tbody合并，比硬编码更可靠 - 若后端无法改结构，前端可用 JS 补
col：遍历第一行th数量，动态插入空col元素，再设 class - 注意：JS 插入
col必须在table渲染前完成，否则部分浏览器（如 Safari）可能忽略
列宽和对齐不是孤立样式问题，它卡在 HTML 结构、CSS 层叠、字体渲染三层交界处。最容易被忽略的是 col 元素的存在性——没它，后面所有样式都只是在修修补补。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
