table-layout: fixed 是移动端表格自适应的前提，必须配合 width: 100% 和显式列宽（优先用 设置百分比），否则列宽失控、内容撑破、横向滚动不可避免。
table-layout: fixed 是移动端表格自适应的前提
不加 table-layout: fixed，光靠 width: 100% 或媒体查询根本压不住列宽。浏览器默认用 table-layout: auto，它要等所有单元格内容加载完才算列宽——长 URL、连续英文、未断行中文一出现，整列就被撑开，其他列被压缩到看不见，横向滚动就成必然。
必须同时写：
table { width: 100%; table-layout: fixed; }- 父容器（比如
<div>）得有明确宽度，例如 <code>width: 100%或max-width: 100vw，否则百分比列宽无从计算 - 只写
table-layout: fixed不设width，表格会塌缩成内容最小宽度，不是你想要的“铺满” - 给第一行
<th> 写 <code>width: 30%也行，但后续行不能混用单位（比如一列120px，一列30%），某些 Android WebView 会直接回退到auto模式 - 对
<td> 单独设 <code>width基本无效，在fixed模式下常被忽略推荐写法：
<colgroup> <col width="25%"> <col width="45%"> <col width="30%"> </colgroup>
长文本溢出导致列宽失控或文字堆叠
table-layout: fixed下，浏览器不会自动换行，长文本要么撑破列，要么溢出容器。必须显式控制：- 允许软换行：
word-break: break-word（兼容性比overflow-wrap: break-word更稳） - 强制单行+省略：
white-space: nowrap; overflow: hidden; text-overflow: ellipsis，但需配合width和display: block才生效 - 避免滥用
white-space: pre-line或pre-wrap，它们会让空格和换行符生效，反而破坏列宽预期
display: block 重构表格不是万能解，但适合语义弱的场景
当表格只是“看起来像表”，实际没有行列逻辑（比如纯展示型数据卡），
display: block确实简单粗暴：- 把
<table>、<code><tr>、<code><td>、<code><th> 全部设为 <code>display: block，脱离表格渲染引擎 - 用
data-label属性保留言语（如<td data-label="城市">北京</td>），再配合 CSS 生成标签，小屏可读性反而更好 - 但它会让屏幕阅读器丢失原生表格语义，无障碍支持变差；如果表格含排序、筛选 JS 逻辑，DOM 结构变化可能引发脚本报错
真正需要行列对齐、跨设备一致性、辅助技术支持的业务表格，
table-layout: fixed+<col>+word-break才是更可靠的选择。 - 允许软换行：
列宽该设在 上优先用 <colgroup><col></colgroup>，别依赖 <th> 写内联 style。原因很实际：<ul>
<li>
<code><col> 的 width 属性在 fixed 模式下被严格遵循，且不影响 DOM 结构和语义
优先用 <colgroup><col></colgroup>，别依赖 <th> 写内联 style。原因很实际：<ul>
<li>
<code><col> 的 width 属性在 fixed 模式下被严格遵循，且不影响 DOM 结构和语义
