加了overflow-x: auto却没反应，根本原因是表格作为独立格式化上下文会无视自身overflow并撑宽父容器；必须用设width/max-width和overflow-x: auto的外层div包裹，table设display: block、white-space: nowrap，iOS需加-webkit-overflow-scrolling: touch。
横向滚动加了overflow-x: auto却没反应？
不是样式漏写了，是表格本身在“抗命”——<table>默认是独立格式化上下文，会无视自身<code>overflow，还拼命撑宽父容器。外层<div>加了<code>overflow-x: auto但没生效，大概率因为：
• 父<div>没设<code>width或max-width（只写overflow没用）
• <table>没加<code>display: block，仍按表格布局算法算宽
• <th>/<code><td>里文字换行了，<code>white-space: nowrap没加到单元格上
• 移动端缺-webkit-overflow-scrolling: touch，iOS拖不动
表格列宽错位、滚动后表头对不齐怎么办
一旦<table>变成<code>display: block，<thead>和<code><tbody>就脱钩了，列宽不再自动同步。常见表现是：横向滚动几下，数据行就歪了。<br>• 必须给每列的<code><th>和对应<code><td>设相同<code>min-width（比如min-width: 120px），别用width: 100%
• 避免table-layout: fixed配百分比宽度，小屏下会把长文本列压成一串省略号
• 如果字段长度差异大，white-space: nowrap配合text-overflow: ellipsis比硬撑更稳
• 固定表头时，position: sticky只能加在<th>上（不能加在<code><thead>），且<code>top: 0必须配z-index高于内容行
需要折叠列又想保持语义，该用:has()还是<details>
:has()方案轻量但有兼容性门槛；<details>原生语义强但结构受限。
• :has()要求目标列统一加class（如col-log），并用visibility: collapse（不是display: none），否则表格结构会塌
• 必须为折叠列设min-width: 0，否则内部长文本仍会撑宽整个表格，滚动条失效
• <details>适合单行主信息+多字段详情的场景，但无法做条件折叠（比如只收起“操作日志”，不碰“创建时间”）
• Safari 15.4+ 和 Chrome 105+ 才支持:has()，旧版本得回退到JS方案或直接隐藏列
固定第一列+横向滚动，为什么position: sticky在<td>上不生效
不是你写错了，是浏览器根本不认——position: sticky在display: table-cell（即原生<td>）上长期支持不佳，Chrome 115前基本静默失效，Firefox更差。<br>• 别在<code><td>或<code><th>上硬试<code>sticky，优先改用display: grid或flex模拟表格
• grid方案里，固定列要显式写grid-template-columns（如120px 1fr 1fr），left值必须匹配列宽
• 若必须保<table>语义，用伪元素+JS同步滚动偏移是唯一可行路径，但意味着放弃纯CSS<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
真正卡住的点往往不在“怎么加滚动”，而在“加完之后表格还像不像个表格”——列宽对齐、语义保留、移动端触控反馈，每一项都可能让方案当场失效。</table>
