必须同时设置table-layout: fixed和width: 100%，否则列宽控制无效；浏览器默认table-layout: auto，需等内容加载完才计算列宽，导致窄屏下横向溢出；优先级最高，须置于后、前，配合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>
<p><code><col> 是专为列级控制设计的语义元素，优先级高于第一行 <th>，且不会被后续样式意外覆盖。
<ul><li>
<code><col> 必须紧接在 <table> 开始标签后、<code><thead> 前，否则不生效
<li>支持 <code>width: 25%、width: 120px，不支持 fr 单位
<col> 的列，会 fallback 到第一行 <th> 的 <code>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> 加 <code>data-label="下单时间" - 小屏下用媒体查询隐藏
<thead> 和原生表格结构，<code><tr> 设 <code>display: block，<td> 设 <code>display: block; position: relative - 用
<td>::before { content: attr(data-label); } 插入字段名，避免 <code>float或inline-block导致换行错位 - 卡片堆叠比滚动更利于理解，尤其对非技术人员
真正卡住人的从来不是“怎么写样式”，而是忘了 table-layout: fixed 和 width: 100% 必须共存，以及 <col> 或第一行 <th> 的宽度声明缺一不可——这两点漏掉任意一个，后面所有样式都是白调。</th>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
