table-layout: fixed 必须与 width: 100% 和显式列宽（如 或 的 width）同时使用才生效；缺一则仍溢出，且 word-wrap/break-word、white-space 等需作用于 td/th 而非 table。

表格内容溢出不是样式没加全，而是布局逻辑没切换——table-layout: fixed 必须和 width: 100%、显式列宽同时生效，缺一不可。

为什么加了 width: 100% 还是溢出？

浏览器默认用 table-layout: auto，它会等所有内容（比如长 URL、未换行英文、图片）加载完才算列宽。小屏下某列被撑开，整行就歪掉，width: 100% 只是把“歪掉的整张表”拉满父容器，反而更难看。

• 必须显式设置 table-layout: fixed，让列宽只看第一行 <th> 或 <code><col> 的 width 值
• width: 100% 是前提，不设这个，fixed 直接不触发
• 至少一个 <th> 或 <code><col> 得带 width（百分比优先），否则剩余列均分空间，容易失衡

  word-wrap: break-word 不生效的常见原因

  即使用了 table-layout: fixed，长文本仍可能溢出或撑破列宽，问题常出在继承链或 display 行为上。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 确保 td 和 th 上设置了 word-wrap: break-word（或 word-break: break-word），不能只写在 table 上
  • white-space: normal 要配合使用，否则空格/换行符被忽略
  • 如果单元格里嵌了 <div> 或 <code><span></span>，它们默认是 white-space: nowrap，得单独重置
  • 图片、<pre class="brush:php;toolbar:false;"></pre>、<code> 类元素需额外处理：img { max-width: 100%; height: auto; }

  移动端列数 ≥ 4 时，别硬撑表格结构

  横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑动中根本记不住哪列对应什么。此时应主动降级为卡片堆叠。

  • 给每行 <tr> 加 <code>data-label，例如 <tr data-label="订单 #12345"><li>小屏下用媒体查询隐藏 <code><thead> 和原始 <code><th>，改用 <code>tr:before 显示 data-label
  • 把每个 <td> 设为 <code>display: block，并用 td:before { content: attr(data-label) ": "; } 补字段名
  • 避免在 Outlook 等邮件客户端用 table-layout: fixed —— 它用 Word 渲染引擎，完全不认这个属性

  容器级横向滚动的实操要点

  当必须保留表格结构（如后台数据报表），水平滚动是最稳妥兜底方案，但细节决定体验。

  • 外层容器用 <div class="table-container"> 包裹 <code><table>，不要直接给 <code>table 加 overflow
  • 容器 CSS： width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  • table 本身设 min-width: 600px（根据实际列数微调），防止窄屏下缩得太小导致文字糊成一团
  • 禁用 td 内部换行（white-space: nowrap）可强化滚动意图，但需搭配 text-overflow: ellipsis + overflow: hidden 防止截断关键信息

  最易被忽略的是：列宽百分比之和不必严格等于 100%，浏览器会自动归一化；但若漏设任何一列宽度，fixed 模式下未设宽的列会平分剩余空间，极易导致关键列被压缩到看不见。