表格撑破页面的直接原因是table-layout: auto默认行为未约束，导致长文本或url无法换行；解决需配合fixed布局、列宽设定、容器滚动及white-space等综合措施。
因为表格默认按内容自动计算列宽，小屏下长文本、URL 或连续无空格字符串无法换行，table-layout: auto 会强行撑开整行甚至整个视口，触发横向滚动条或内容溢出。
表格撑破页面的直接原因
不是屏幕小，而是浏览器对表格的默认布局行为没被约束：
-
table-layout: auto（默认值）会让每列宽度由最长单元格内容决定，哪怕内容是一长串不带空格的英文或 URL -
white-space: normal对中文有效，但对https://example.com/very/long/path/with/no/spaces这类内容几乎无效 - 没设
width或max-width的<table> 会无限扩张，父容器又没加 <code>overflow-x: hidden或auto - 用
display: inline-table或嵌套在flex容器里时，子项默认min-width: auto，进一步锁死收缩能力 - 没给列指定宽度：必须配合
<col width="120">或 CSS 中col { width: 120px; }，否则浏览器仍按内容估算 - 在
<td> 里用了 <code>display: flex或inline-block—— 这些会绕过fixed布局，让列宽失控 - 设置了
width: 100%但父容器本身没定宽（比如父级是position: absolute且没设left/right），导致100%计算失效 - 用了
min-width而非width或max-width，min-width只保下限，不防撑大 - 直接给
<table> 加 <code>display: block—— 语义破坏，屏幕阅读器可能跳过表头；正确做法是包一层<div class="table-container">，只对这个 div 设 <code>overflow-x: auto - 忘了给单元格加
white-space: nowrap—— 滚动时文字换行，高度暴涨，用户得上下左右一起滚 - 给
<table> 设了 <code>width: 100%—— 这会让列被压缩变形，文字挤成一团；应改用min-width: 600px或width: max-content - 在 iOS 上没加
-webkit-overflow-scrolling: touch—— 滚动卡顿，用户以为页面卡死 -
overflow-wrap: break-word（推荐优先用）：只在单词超长时折行，比如把verylongurl.com拆成两行，中英文混排也自然，兼容性好 -
word-break: break-all：强制在任意字符间断，适合纯数据表格（如日志 ID、哈希值），但会把React.js拆成React.和js，影响可读性 -
word-break: keep-all：中文/日文不拆字，但英文长词仍可能撑开 —— 必须搭配overflow: hidden或滚动容器才真正生效 - 单行标题要省略号？必须三件套同时存在：
width（或max-width）、white-space: nowrap、overflow: hidden，缺一不可
为什么 table-layout: fixed 不总起作用
写了 table-layout: fixed 却还是撑开，大概率是漏掉了配套约束：
横向滚动方案里最容易踩的坑
用 display: block + overflow-x: auto 是最常用解法，但错一步就白搭：
文字截断和换行选哪个更安全
别凭感觉选 word-break 或 overflow-wrap，它们解决的是不同问题：
真正麻烦的不是写几行 CSS，而是表格结构里混了图片、按钮、嵌套 flex 容器，或者用了 JS 动态插入内容后忘了重置样式。这些地方一漏，前面所有设置都归零。
