最稳横向滚动方案是 display: block + overflow-x: auto；表格需脱离渲染流（display: block）、父容器设 max-width、th/td 加 white-space: nowrap，table-layout: fixed 为防崩底线；列折叠纯 css 依赖 :has() + checkbox，但仅 chrome 105+/safari 15.4+ 支持，旧版需 js 降级。
直接用 display: block + overflow-x: auto 是最稳的横向滚动方案；列折叠若想免 JS，得靠 :has() + checkbox，但 Safari/Chrome 版本有硬门槛。
为什么 overflow-x: auto 常常不生效
表格默认会撑满内容宽度，哪怕父容器设了 max-width，浏览器也优先“保全表格完整性”，而不是尊重溢出规则。关键破局点是让 table 脱离表格渲染流。
- 父容器必须设
max-width（不能只写width: 100%，尤其在 flex/grid 环境下计算模糊） -
table元素加display: block，再配width: max-content或min-width: 600px -
th/td加white-space: nowrap，否则换行会破坏横向滚动预期 - 避免给所有列设固定
width且总和超限——内部溢出但外部无滚动条
:has() 实现列折叠要注意兼容性与结构约束
:has() 是目前唯一能纯 CSS 控制列显隐的方案，但它不是万能胶：它依赖 checkbox 的 checked 状态反向影响兄弟列，且对 DOM 结构敏感。
- 仅 Chrome 105+、Safari 15.4+ 支持，旧版需降级为 JS 切换
visibility: collapse - 被折叠列必须统一加 class（如
col-log），不能依赖colspan——:has()无法穿透合并单元格逻辑 - checkbox 必须放在表格外（比如页眉），用
for关联或相邻兄弟选择器控制 -
visibility: collapse在表格中表现特殊：它隐藏单元格但保留布局空间，要配合min-width: 0防止列宽卡死
table-layout: fixed 是防崩底线，不是可选项
小屏下表格错位、列宽忽大忽小，八成是因为还在用默认的 table-layout: auto。它等所有内容（长 URL、图片）加载完才算列宽，移动端首屏渲染就容易失序。
-
table必须显式设width: 100% - 至少一列通过
<col width="200">或th[style="width:25%"]指定宽度 - 别在
td上滥用white-space: nowrap，除非你明确禁止换行 - Outlook 完全不支持该属性，邮件模板里别用
真正难的不是写对某一行 CSS，而是判断什么时候该放弃表格语义——比如字段少于 4 列、移动端用户主要查单条记录时，data-label + display: block 堆叠反而比滚动更可靠。别让“必须用 table”成为设计前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
