width: 100%单独使用会失效，因浏览器默认table-layout: auto需等全部内容加载后计算列宽，窄屏下长URL或连续英文易撑破布局；必须配合table-layout: fixed及<col>或首行单元格的显式列宽定义，并用word-break与white-space控制溢出。
直接设 width: 100% 不够，必须配合 table-layout: fixed 和显式列宽控制，否则小屏下文字撑开、横向溢出、列宽崩坏是大概率事件。
为什么 width: 100% 单独用会失效
浏览器默认用 table-layout: auto，它要等所有内容（包括图片、长文本、嵌套元素）加载完才计算每列宽度。窄屏下某列一个长 URL 或未换行的英文单词就能把整行拉宽，导致容器溢出、滚动条强制出现。这不是 CSS 写错了，是渲染逻辑本身就不适配移动端信息优先的阅读习惯。
常见错误现象：
- 表格在手机上左右滑动才能看全，但用户根本没意识到要滑
-
th文字被压缩成“…”，而右侧空白大片 - 加了
width: 100%后，某些列反而变窄到文字重叠
必须搭配 table-layout: fixed 使用
启用 table-layout: fixed 后，列宽只由第一行 <th> 或 <col> 的 width 决定，不依赖后续内容。这是可控性的前提。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 表格样式里必须同时写
width: 100%和table-layout: fixed，缺一不可 - 给每一列的
<th>加style="width: 20%"，或用<col>标签统一控制：<col style="width: 15%"><col style="width: 25%"><col style="width: 60%">
- 避免在
<tr>或<td>上设height，否则可能截断内容或破坏自适应高度 - 如果列数多、比例难分配，改用
minmax(120px, 1fr)+display: grid替代表格更稳妥
防长文本撑破列宽：word-break 和 white-space 要配齐
仅靠固定布局还不够。半角连续字符（如 base64 字符串、日志 ID、URL）不会自动换行，仍会突破设定列宽。
正确组合：
- 表格级加
table-layout: fixed -
<td>和<th>加word-break: break-all（强制断词）或word-wrap: break-word（优先软换行） - 确保
white-space: normal，禁用white-space: nowrap - 若需保留可复制性，用
overflow-wrap: break-word更现代，兼容性也够（Chrome 58+、Firefox 49+、Safari 10.1+）
移动端真正可用的底线方案
当列数 ≥ 6 或字段语义差异大（比如混有操作按钮、状态标签、长描述），硬塞进窄屏只会牺牲可读性。这时候响应式不是“让表格变小”，而是“换种形式呈现”。
推荐做法：
- 用媒体查询在
max-width: 768px下包裹表格容器加overflow-x: auto，让用户水平滑动——比内容错位强 - 更优解：用
@media (max-width: 768px)把表格转为垂直堆叠的<dl>或卡片列表，每条记录一个区块，字段用<dt>/<dd>配对 - 别忽略
<meta name="viewport">，没有它，所有 CSS 响应式都是空谈
最易被忽略的一点：百分比列宽在 table-layout: fixed 下是相对于表格容器宽度计算的，不是视口宽度。如果你的表格嵌套在 max-width: 800px 的 div 里，那 width: 100% 是指这个 div 的宽度，不是屏幕宽度——这点不厘清，调试时容易绕晕。
