table-layout: fixed 是控制表格列宽稳定性的关键属性，必须与 width: 100% 同时使用，配合 设置宽度，才能避免长内容撑爆列宽；它切换渲染逻辑为仅依赖首行或显式声明，提升性能与稳定性。
table-layout: fixed 是必须打开的开关
不加 table-layout: fixed，光写 width: 100% 几乎一定失效——浏览器还在用默认的 table-layout: auto 模式，等所有内容加载完才动态算列宽，小屏下一条长 UUID 或 URL 就能把整列撑爆，拖垮整张表。
这个属性不是“让表格变宽”，而是切换渲染逻辑：它只看第一行 <th> 或显式 <code><col> 的宽度声明，跳过内容扫描，渲染快、列宽稳、不抖动。
-
table-layout: fixed必须和width: 100%同时设置，缺一不可；单独设前者，表格仍按内容宽度渲染 - 如果父容器没设宽度（比如默认
<div>），<code>width: 100%会失去参照，结果还是不占满 - IE8+ 和所有现代浏览器都支持，无需前缀
- 正确写法：@@######@@
- 没写
<col>的列，宽度 fallback 到对应<th> 的 <code>width属性；都没写，就坍缩成最小内容宽 - 混合单位可行：比如
<col width="150"> <col width="40%">，剩余空间由百分比列按比例分配 - 优先用
word-break: break-all：强制在任意字符间断行，兼容性更好 - 搭配
white-space: normal确保换行生效（避免父级或自身设了nowrap） - 对
<td> 单独加样式比全局设更可控：<code>td { word-break: break-all; } - 注意副作用：中文段落可能被不合理截断，若业务允许，可对英文/数字字段单独加类处理
- 横向滚动容器是底线方案：
<div style="overflow-x: auto;"><table>...</table></div>，记得加-webkit-overflow-scrolling: touch提升 iOS 流畅度 - 媒体查询切换布局更友好：小屏下用
display: block把每行转成卡片，用data-label属性存原列名，视觉上变成「字段：值」堆叠 - CSS Grid 替代表格适用于新项目：用
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))自动均分，但需重写 HTML 结构
<col> 是唯一能可靠控制列宽的 HTML 原生方式，但它必须紧接在 <table> 开始标签后、<code><thead> 之前，放错位置（比如塞进 <code><thead> 或 <code><tbody> 里）浏览器直接忽略。
<p>支持 <code>px、%、em，不支持 fr；百分比总和不必等于 100%，浏览器会自动归一化。
长文本撑破列宽？word-break 不是万能解药
即使用了 table-layout: fixed 和 <col>，纯英文/数字长串（如 abc12345678901234567890）仍可能突破列宽——因为浏览器默认不允许在无空格字符串中间断行。
此时仅靠 word-wrap: break-word 不够稳定，尤其在旧版 Safari 或某些移动端 WebView 中表现不一。
列太多时别硬撑，滚动或堆叠更实际
超过 5–6 列且字段不可删减时，强行用 table-layout: fixed + 百分比分配，往往导致小屏上文字严重挤压、可读性归零。这不是 CSS 写得不够细，而是表格本身不适合窄屏行列对齐场景。
| 姓名 | 邮箱 | 状态 |
|---|---|---|
| 张三 | xxx@long-domain.example | 启用 |
