伪类不能让表格列自适应，真正起作用的是table-layout: fixed配合宽度声明和媒体查询；伪类仅用于匹配样式或响应式显隐，不参与布局计算。
伪类本身不能让表格列“自适应”——:nth-child、:hover 这类选择器只负责匹配和样式，不参与布局计算。真正起作用的是 table-layout: fixed 配合宽度声明，再用媒体查询切换行为。
为什么伪类常被误认为能控制列宽
常见误解来自两处：一是看到 th:nth-child(1) { width: 20% } 就以为是伪类在“驱动”自适应；二是把 td::before { content: attr(data-label) }（用于卡片模式）当成列宽控制手段。其实前者靠的是 table-layout: fixed 的底层机制，后者只是语义增强，和宽度无关。
table-layout: fixed 是列宽可控的前提
没有它，所有基于 width 的设置都会被内容撑开，尤其小屏下更不可控。
-
table { table-layout: fixed; width: 100%; }必须设在table元素上，不能只写在th/td - 首行
th或td的width值才生效，后续行的宽度声明会被忽略 - 百分比宽度需配合容器有明确宽度（如父级
max-width或flex限制） - 避免混用
min-width和width在同一列，容易触发浏览器计算冲突
用媒体查询 + 伪类实现“响应式列行为”
这里伪类真正有用：在断点内批量控制列显隐或样式，而不是“自适应”本身。
- 隐藏非关键列：
@media (max-width: 768px) { .operation-col { display: none; } }，其中.operation-col可通过td:nth-child(5)或预设 class 绑定 - 给长文本列统一加截断：
td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; } - 表头悬停高亮整行：
tbody tr:hover td { background-color: #f8f9fa; }，提升小屏操作反馈 - 注意：伪类选择器层级太深（如
tbody tr:nth-of-type(odd) td:first-child）会影响重绘性能，移动端慎用
真正影响列宽响应性的三个易忽略点
这些地方改错，再多伪类也救不回来：
-
table外层没包div.table-container，直接对table设overflow-x: auto—— iOS Safari 下滚动卡顿且无惯性 - 用了
white-space: nowrap却没配min-width或max-width，导致小屏下文字强行撑宽整表 - HTML 中
colspan/rowspan破坏了列数一致性，table-layout: fixed会按首行单元格数分配宽度，后续跨列行直接错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
