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，表格会塌缩成内容最小宽度，不是你想要的“铺满”

列宽该设在 还是 上

优先用 <colgroup><col></colgroup>，别依赖 <th> 写内联 style。原因很实际： <ul> <li> <code><col> 的 width 属性在 fixed 模式下被严格遵循，且不影响 DOM 结构和语义

给第一行 <th> 写 <code>width: 30% 也行，但后续行不能混用单位（比如一列 120px，一列 30%），某些 Android WebView 会直接回退到 auto 模式

对 <td> 单独设 <code>width 基本无效，在 fixed 模式下常被忽略

推荐写法：



CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

<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 才是更可靠的选择。