width: 100%单独无效是因为浏览器默认table-layout: auto，列宽由内容决定，需搭配table-layout: fixed及第一行或<col>的显式宽度声明才能约束列宽，否则窄屏下文字挤压、横向溢出不可避免。
直接设 width: 100% 不够，必须搭配 table-layout: fixed 和显式列宽控制，否则小屏下文字挤压、横向溢出、列宽崩坏是常态。
为什么 width: 100% 单独无效？
浏览器默认用 table-layout: auto，会等所有内容（比如长 URL、未缩放图片、连续无空格文本）加载完才算列宽。窄屏下某列被撑开，整行就溢出容器——不是没占满宽度，而是“占满”后内容根本塞不下。
-
width: 100%只让<table>撑满父容器，不改变列宽计算逻辑 - 没配
table-layout: fixed，width值对列宽几乎无约束力 - 移动端滚动查看整表 ≠ 自适应，只是妥协方案
table-layout: fixed 必须怎么写才生效？
它只认第一行 <th> 或 <col> 的宽度声明，且必须和 width: 100% 同时存在，缺一不可。
- 在
<table>上加：style="table-layout: fixed; width: 100%;" - 给每列
<th>设百分比宽度，例如：<th style="width: 20%">姓名</th> - 或用
<col>统一控制：<col style="width: 25%"><col style="width: 25%"> - 没设满所有列宽时，剩余空间由未设宽列平分，容易失衡——建议每列都设
长文本撑开列宽怎么办？
即使用了 table-layout: fixed，纯字母/数字长串（如 https://example.com/very/long/path）仍会突破设定宽度，需额外干预。
立即学习“前端免费学习笔记（深入）”；
- 对
<td>或<th>加：word-break: break-all;（粗暴但有效） - 更温和的选型：
overflow-wrap: break-word;（优先在空格处断行） - 禁用换行会加剧溢出：
white-space: nowrap;别乱加 - 配合
min-width: 120px;防止过窄列，尤其含操作按钮的列
列数多、比例难定怎么办？
手动均分百分比（如 4 列各设 25%）在动态列数或复杂表头下极易出错，此时 CSS Grid 是更稳的替代路径。
- 把
<table>替换为<div class="grid-table">，用display: grid+grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) - 语义虽弱于原生 table，但响应式控制精度高、无渲染陷阱
- 邮件场景慎用：Outlook（基于 Word 渲染引擎）不支持
table-layout: fixed，也基本不支持 Grid
真正卡住人的从来不是“怎么写”，而是忘了 table-layout: fixed 和 width: 100% 必须共存，以及第一行宽度声明缺一不可——这两点漏掉任意一个，后面所有样式都是白调。
