table-layout: auto 在移动端必然导致横向滚动，因其需等全部内容渲染完才计算列宽，长URL、连续英文或未断行中文会撑开整列，压缩其他列至不可见，仅靠 width: 100% 或媒体查询无法解决根本问题。
table-layout: auto 在移动端必然导致横向滚动
浏览器默认用 table-layout: auto，它要等所有 <td> 内容渲染完才计算列宽。长 URL、连续英文、未断行中文一出现，整列就被撑开，其他列被压缩到看不见——结果就是用户必须左右拖拽才能看全内容。<br>你加 <code>width: 100% 或媒体查询根本压不住，因为列宽逻辑没变。
table-layout: fixed 也不能解决响应式本质问题
设成 table-layout: fixed 是必要条件，但不是充分条件。它要求你显式定义每列宽度（最好用 <col>），且父容器必须有明确宽度（比如 width: 100%）。但问题在于：
• 列宽单位混用（px 和 %）会让某些 Android WebView 回退到 auto 模式
• <td> 里文字不换行，<code>word-break: break-word 必须手动加，否则仍溢出
• 所有列宽是静态的，@media 下无法像 Flexbox 那样直接改 flex-direction 或 flex-wrap
display: table-cell 在小屏下几乎无法优雅折行
用 CSS 模拟表格（display: table / display: table-cell）看起来轻量，实则继承了原生 <table> 的渲染逻辑：<br>• <code>vertical-align 行为受限，margin 完全无效
• flex-wrap: wrap 这种天然折行能力它没有
• 媒体查询中改 display 类型（比如从 table-cell 改成 block）会破坏 DOM 语义和可访问性顺序
• 屏幕阅读器仍按“表格”结构读取，导航栏变成“第一行数据”，页脚变成“最后一行”
Flexbox 替代 table 布局的最小改动路径
旧页面如果已用 <table> 做结构，不用重写 HTML，只需改 CSS：<br>• 父容器加 <code>display: flex，子元素自动水平排列
• 固定侧边栏：设 width: 240px；主内容区用 flex: 1（不是 flex: auto）
• 折行响应式：加 flex-wrap: wrap + min-width 控制最小列宽
• 小屏堆叠：用 @media (max-width: 600px) 改 flex-direction: column
注意：别用 order 调视觉顺序，DOM 顺序不变，屏幕阅读器仍按原始 HTML 读
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对代码，而是判断什么时候该用<table> ——只在展示二维结构化数据时它才合法；一旦你开始给 <code><header></header> 或轮播图套 <table>，语义就错了，后续所有适配努力都在对抗标准本身。</table>
