width: 100%单独使用会失效，因浏览器默认table-layout: auto需等全部内容加载后计算列宽，窄屏下长url或连续英文易撑破布局；必须配合table-layout: fixed及或首行单元格的显式列宽定义，并用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> 或 <code><col> 的 width 决定，不依赖后续内容。这是可控性的前提。
实操要点：
- 表格样式里必须同时写
width: 100%和table-layout: fixed，缺一不可 - 给每一列的
<th> 加 <code>style="width: 20%"，或用<col>标签统一控制：<col style="width: 15%"><col style="width: 25%"><col style="width: 60%">
- 避免在
<tr> 或 <code><td> 上设 <code>height，否则可能截断内容或破坏自适应高度 - 如果列数多、比例难分配，改用
minmax(120px, 1fr)+display: grid替代表格更稳妥 - 表格级加
table-layout: fixed <td> 和 <code><th> 加 <code>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+） - 用媒体查询在
max-width: 768px下包裹表格容器加overflow-x: auto，让用户水平滑动——比内容错位强 - 更优解：用
@media (max-width: 768px)把表格转为垂直堆叠的<dl></dl>或卡片列表，每条记录一个区块，字段用<dt>/</dt> <dd></dd>配对 - 别忽略
<meta name="viewport">，没有它，所有 CSS 响应式都是空谈
防长文本撑破列宽：word-break 和 white-space 要配齐
仅靠固定布局还不够。半角连续字符（如 base64 字符串、日志 ID、URL）不会自动换行，仍会突破设定列宽。
正确组合：
移动端真正可用的底线方案
当列数 ≥ 6 或字段语义差异大（比如混有操作按钮、状态标签、长描述），硬塞进窄屏只会牺牲可读性。这时候响应式不是“让表格变小”，而是“换种形式呈现”。
推荐做法：
最易被忽略的一点：百分比列宽在 table-layout: fixed 下是相对于表格容器宽度计算的，不是视口宽度。如果你的表格嵌套在 max-width: 800px 的 div 里，那 width: 100% 是指这个 div 的宽度，不是屏幕宽度——这点不厘清，调试时容易绕晕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
