加了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></details>
:has()方案轻量但有兼容性门槛；<details></details>原生语义强但结构受限。
• :has()要求目标列统一加class（如col-log），并用visibility: collapse（不是display: none），否则表格结构会塌
• 必须为折叠列设min-width: 0，否则内部长文本仍会撑宽整个表格，滚动条失效
• <details></details>适合单行主信息+多字段详情的场景，但无法做条件折叠（比如只收起“操作日志”，不碰“创建时间”）
• Safari 15.4+ 和 Chrome 105+ 才支持:has()，旧版本得回退到JS方案或直接隐藏列
