表格溢出的根本原因是table-layout: fixed未真正生效，必须同时满足width: 100%、显式设置col或th的width（如百分比），否则仍按auto模式计算列宽导致撑开。

表格内容溢出不是样式没加全，而是布局逻辑没切换——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 行为上。

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载
  • 确保 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 防止视觉失控

  真正容易被忽略的是：很多人反复调 word-break 和 padding，却没意识到问题根源在 table-layout 模式没真正切换成功——只要 <col> 或第一行 <th> 缺显式宽度，<code>fixed 就是假的。