table-layout: fixed 必须与 width: 100% 和显式列宽（如 <th> 或 <col> 的 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>或<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 时，别硬撑表格结构
横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑动中根本记不住哪列对应什么。此时应主动降级为卡片堆叠。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 给每行
<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防止截断关键信息
最易被忽略的是：列宽百分比之和不必严格等于 100%，浏览器会自动归一化；但若漏设任何一列宽度，fixed 模式下未设宽的列会平分剩余空间，极易导致关键列被压缩到看不见。
