table-layout: auto 无法撑开多行内容，因其列宽仅由首行单元格内容决定，后续行中换行元素或长文本不会反向影响列宽，导致溢出或截断。
table-layout: auto 为什么撑不开多行内容
table-layout: auto 下，表格列宽由**首行单元格内容决定**，后续行中带换行的 、
或长文本（如 URL）不会反向影响列宽。
浏览器只扫描第一行计算宽度，导致多行内容溢出或被截断。
- 即使设置
white-space: normal 和 word-break: break-word，列宽也不会重算
- 配合
min-width 无效——因为“自动布局”不响应子元素尺寸变化
- 在 Chrome/Firefox 中表现一致，Safari 会更激进地压缩
用 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 测量带来的额外复杂度。
