:nth-col()伪类从未被任何主流浏览器实现，仅存在于早期草案中并已被移除；当前使用如td:nth-col(2)完全无效且无报错。
为什么 :nth-col() 在当前浏览器中完全不可用
直接说结论：:nth-col() 伪类**从未被任何主流浏览器实现过**，它只在早期 CSS WG 讨论草案中出现过，后来被移除。现在写 td:nth-col(2) { width: 150px; } 不会生效，控制台也不会报错——只是静静忽略。这是开发者踩得最多也最隐蔽的坑：查了一堆教程，发现全是“理论上可行”的误导内容。
真正能用的三类列宽控制方案（按推荐顺序）
要给表格列“视觉上”设不同宽度，必须绕过「列选择器缺失」这个根本限制。核心思路是：**把列宽控制权交给 <col> 元素，或用属性/结构特征间接定位单元格**。
-
首选：
<colgroup>+<col>—— 语义正确、性能好、支持响应式。在<table>开头插入：<colgroup> <col span="1" style="width: 80px"> <col span="1" style="width: 200px"> <col span="2" style="width: 120px"> </colgroup>
注意：span表示该<col>覆盖后续多少列；style或外部 class 均可；<col>只影响列宽，不影响背景、边框等样式（这些需作用于td/th） -
次选：用
nth-child()定位单元格 —— 适用于固定结构表格。例如第二列所有单元格：td:nth-child(2), th:nth-child(2) { width: 180px; min-width: 180px; }关键点：nth-child(n)按 DOM 顺序数，不是按“视觉列”；如果某行有colspan，会导致错位；必须同时写td和th，否则表头列宽不一致 -
备用：为
td添加class或data-col—— 最可控，适合动态渲染场景。例如：<td data-col="price">¥99</td>
对应 CSS：[data-col="price"] { width: 100px; }缺点是增加 HTML 冗余，但避免了结构依赖和兼容性问题
table-layout: fixed 是列宽稳定的前提
无论用哪种方案，如果没加 table-layout: fixed，浏览器会按内容自动重算列宽，导致你设的 width 被无视。必须显式设置：
table {
table-layout: fixed;
width: 100%;
}
- 加了之后，
<col>的宽度才真正生效，td的width才可能起作用 -
table-layout: fixed下，第一行（或<colgroup>）决定列宽基准，后续行单元格内容超长会换行或溢出，需配合white-space: nowrap或overflow: hidden控制 - 不要对
td单独设display: block或浮动——这会破坏表格渲染模型，列宽彻底失控
容易被忽略的响应式与可访问性细节
列宽不是设完就完的事。移动端小屏下，硬编码像素值会让表格横向滚动或内容挤压。更麻烦的是，屏幕阅读器依赖表格语义结构，乱用 colspan/rowspan 或脱离 <colgroup> 的 hack 方式，可能让读屏软件无法正确播报行列关系。
立即学习“前端免费学习笔记（深入）”；
- 用相对单位：
col { width: 25%; }比120px更适应缩放和小屏 - 用媒体查询覆盖列宽：
@media (max-width: 768px) { col:nth-child(3) { width: 40px; } }注意：部分旧版 Safari 对col的媒体查询支持不稳定，建议降级为 JS 动态切 class - 如果用
nth-child，确保每行td数量一致；否则列序错位会导致辅助技术解析失败
真正难的从来不是“怎么写那行 CSS”，而是想清楚：这个表格在窄屏下是否还该以表格形式呈现？有时候，用 CSS Grid 重排数据比硬撑表格语义更合理。
