表格溢出的根本原因是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>或<col>的width值 -
width: 100%是前提，不设这个，fixed直接不触发 - 至少一个
<th>或<col>得带width（百分比优先），否则剩余列均分空间，容易失衡
word-wrap: break-word 不生效的常见原因
即使用了 table-layout: fixed，长文本仍可能溢出或撑破列宽，问题常出在继承链或 display 行为上。
- 确保
td和th上设置了word-wrap: break-word（或word-break: break-word），不能只写在table上 -
white-space: normal要配合使用，否则空格/换行符被忽略 - 如果单元格里嵌了
<div>或<span>，它们默认是white-space: nowrap，得单独重置 - 图片、
<pre>、<code>类元素需额外处理：img { max-width: 100%; height: auto; }
移动端列数 ≥ 4 时，别硬撑表格结构
横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑动中根本记不住哪列对应什么。此时应主动降级为卡片堆叠。
立即学习“前端免费学习笔记（深入）”；
- 给每行
<tr>加data-label，例如<tr data-label="订单 #12345"> - 小屏下用媒体查询隐藏
<thead>和原始<th>，改用tr:before显示data-label - 把每个
<td>设为display: block，并用td:before { content: attr(data-label) ": "; }补字段名 - 避免在 Outlook 等邮件客户端用
table-layout: fixed——它用 Word 渲染引擎，完全不认这个属性
容器级横向滚动的实操要点
当必须保留表格结构（如后台数据报表），水平滚动是最稳妥兜底方案，但细节决定体验。
- 外层容器用
<div class="table-container">包裹<table>，不要直接给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> 缺显式宽度，fixed 就是假的。
