table-layout: auto 无法撑开多行内容，因其列宽仅由首行单元格内容决定，后续行中换行元素或长文本不会反向影响列宽，导致溢出或截断。
table-layout: auto 为什么撑不开多行内容
table-layout: auto 下，表格列宽由**首行单元格内容决定**，后续行中带换行的
、
或长文本（如 URL）不会反向影响列宽。
浏览器只扫描第一行计算宽度，导致多行内容溢出或被截断。
用 display: grid 替代 table 的关键约束
Grid 能真正响应多行内容高度与宽度，但必须放弃语义化
结构。核心是用 grid-template-columns 控制列，用 minmax(0, 1fr) 防止内容撑破容器。
- 避免写死
grid-template-columns: 1fr 1fr 1fr——遇到长文本仍会溢出
- 正确写法是
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))))，让列数动态适应
- 每行需用
display: contents 包裹行容器（如
），否则 grid 无法跨行对齐
.grid-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))); gap: 8px; } .grid-row { display: contents; } .grid-cell { min-width: 0; /* 关键：允许内部文本折行 */ word-break: break-word; }
当必须用 table 时，唯一可靠的自适应方案
如果 html 必须保留
标签（例如后端模板或可访问性要求），只能放弃 table-layout: auto，改用 table-layout: fixed + javaScript 动态测量。
- 先设
table-layout: fixed，再用 getBoundingClientRect() 读取每列实际最大宽度
- 不能依赖
offsetWidth——它返回的是 css 设定值，不是渲染后真实宽度
- 需在
requestAnimationFrame 中读取，确保 layout 已完成
- 对每列设
width 内联样式，且加 !important 覆盖原有 CSS
function fitTableColumns() { const cols = document.querySelectorAll('table th, table td'); const widths = Array.from(cols).map(el => el.getBoundingClientRect().width); // 按列分组取 max，然后写入 colgroup }
移动端多行表格最常被忽略的细节
横向滚动不是万能解法。ios Safari 对 overflow-x: auto 表格的 touch 滚动支持极差，手指一滑就触发页面回弹。
立即学习“前端免费学习笔记（深入）”；
- 必须给
外层加 touch-action: pan-x
- 禁用
-webkit-overflow-scrolling: touch（已废弃，反而引发抖动）
- 用
min-width: fit-content 替代 width: 100%，否则小屏下强制拉伸导致文字过小
- 若内容含图标或按钮，确保
font-size 不随缩放失效——加 text-size-adjust: 100%
表格多行自适应真正的难点不在布局模式选择，而在何时放弃表格语义。只要不需要屏幕阅读器把数据读成“第3行第2列”，grid 就比任何 table hack 更干净；但如果涉及导出 excel 或 WCAG 合规，就得接受 js 测量带来的额外复杂度。