必须同时设置table-layout: fixed和width: 100%，否则列宽控制无效；浏览器默认table-layout: auto，需等内容加载完才计算列宽，导致窄屏下横向溢出；<col>优先级最高，须置于<table>后、<thead>前，配合word-break等处理溢出。
table-layout: fixed 必须和 width: 100% 同时设置，否则所有列宽控制都无效——这是最常被跳过的硬性前提。
为什么 width: 100% 单独写没用？
浏览器默认用 table-layout: auto，它会等所有内容（比如长 URL、未缩放图片、连续 Base64 字符串）加载完才算列宽。窄屏下一列被撑开，整行就横向溢出，width: 100% 只是“名义上”占满父容器，实际渲染完全失控。
-
table-layout: fixed才真正把列宽计算权从内容手里夺回来 - 但该属性只在
table元素同时声明width: 100%时才生效 - IE8+ 支持，但 Outlook（基于 Word 渲染引擎）完全不识别——发邮件别用
列宽怎么设才稳定？优先用 <col>，不是 <th>
<col> 是专为列级控制设计的语义元素，优先级高于第一行 <th>，且不会被后续样式意外覆盖。
-
<col>必须紧接在<table>开始标签后、<thead>前，否则不生效 - 支持
width: 25%、width: 120px，不支持fr单位 - 没写
<col>的列，会 fallback 到第一行<th>的width；若也没设，就坍缩成最小内容宽，可能窄到看不见
长文本、URL、无空格字符串仍溢出怎么办？
table-layout: fixed 锁定了列宽计算逻辑，但不等于内容自动换行或截断。连续无空格字符串（如 https://a.b/c/d/e/f/g、LOG-20260819-7A8B9C）会直接突破单元格边界。
立即学习“前端免费学习笔记（深入）”；
- 允许合理换行：
word-break: break-word（推荐）或overflow-wrap: break-word - 禁用
white-space: nowrap—— 它会让所有换行策略失效 - 对含操作按钮的列加
min-width: 120px，防止过窄导致点击困难 - 图片必须设
max-width: 100%; height: auto，否则无视列宽
列数 ≥ 4 或字段语义强时，别硬撑表格
当列多、字段有明确业务含义（如“下单时间”“收货人电话”），横向滚动会让用户记不住哪列是啥。这时候“响应式”不是压缩列宽，而是结构切换。
- 给每个
<td>加data-label="下单时间" - 小屏下用媒体查询隐藏
<thead>和原生表格结构，<tr>设display: block，<td>设display: block; position: relative - 用
<td>::before { content: attr(data-label); }插入字段名，避免float或inline-block导致换行错位 - 卡片堆叠比滚动更利于理解，尤其对非技术人员
真正卡住人的从来不是“怎么写样式”，而是忘了 table-layout: fixed 和 width: 100% 必须共存，以及 <col> 或第一行 <th> 的宽度声明缺一不可——这两点漏掉任意一个，后面所有样式都是白调。
