table-layout: auto 无法撑开多行内容，因其列宽仅由首行单元格内容决定，后续行中换行元素或长文本不会反向影响列宽，导致溢出或截断。
table-layout: auto 为什么撑不开多行内容
table-layout: auto 下，表格列宽由**首行单元格内容决定**，后续行中带换行的 <div>、<p> 或长文本（如 URL）不会反向影响列宽。浏览器只扫描第一行计算宽度，导致多行内容溢出或被截断。
- 即使设置
white-space: normal和word-break: break-word，列宽也不会重算 - 配合
min-width无效——因为“自动布局”不响应子元素尺寸变化 - 在 Chrome/Firefox 中表现一致，Safari 会更激进地压缩
用 display: grid 替代 table 的关键约束
Grid 能真正响应多行内容高度与宽度，但必须放弃语义化 <table> 结构。核心是用 grid-template-columns 控制列，用 minmax(0, 1fr) 防止内容撑破容器。
- 避免写死
grid-template-columns: 1fr 1fr 1fr——遇到长文本仍会溢出 - 正确写法是
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))))，让列数动态适应 - 每行需用
display: contents包裹行容器（如<div class="row">），否则 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> 标签（例如后端模板或可访问性要求），只能放弃 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 滚动支持极差，手指一滑就触发页面回弹。
立即学习“前端免费学习笔记（深入）”；
- 必须给
<table>外层加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 测量带来的额外复杂度。
