table-layout: auto 时列宽由全表内容宽度（含字体、padding、border等）估算自然最小宽，再按比例分配剩余空间；fixed 模式下仅依据第一行或 col 定义的 width 决定列宽，且需 table 有明确 width 才生效。
table-layout: auto 时列宽怎么算
浏览器在 table-layout: auto 模式下，会扫描整张表（所有行、所有单元格）的内容宽度，结合字体、字号、空格、换行策略（white-space）、padding 和 border，估算每列的“自然最小宽度”。然后按比例分配剩余空间，使总宽匹配 table 的设定宽度（如 width: 100%）。
这个过程不可预测：
- 中文无空格长文本（如一串身份证号）会直接撑开整列，其他列被压缩
- min-width 在单元格上可能无效，因为 auto 模式优先尊重内容渲染结果
- 表头 <th> 和数据行 <code><td> 的内容都会参与计算，不是只看第一行
- 如果父容器 width 不固定（比如 <code>max-width: 1200px 但没设 width），表格实际宽度可能小于 100%，导致列宽收缩异常
table-layout: fixed 时 width 只认第一行和 <col>table-layout: fixed 下，列宽完全由两处决定：
- <col> 元素（必须放在 <thead> 之前，且只支持 <code>px、%、em，不支持 fr 或 minmax()）
- 或第一行 <tr> 中的 <code><th>/<code><td> 的 <code>width 声明（后续行所有 width 都被忽略）
关键约束：
- <table> 必须有明确的 <code>width（如 width: 100% 或 width: 800px），否则 fixed 失效，退化为 auto 行为
- min-width / max-width 在 fixed 模式下常被跳过，不要依赖它们控制列宽
- 如果某列没写 <col> 也没在第一行定义 width，它的宽度 = (tableWidth - 已定义列宽总和) / 剩余列数，结果可能是 0 或负值（此时按 0 处理）
流式场景下表格溢出的真正原因
表格本身不“流”，它只是个块级元素。所谓“流式表格”，其实是靠外层容器和 CSS 联动实现的：
- width: 100% 只让表格占满父容器，但列宽仍由内部 layout 规则决定
- 小屏下即使表格宽度缩了，fixed 模式下的列宽（如 <col width="200">）不会自动缩放，必然溢出
- 常见错误是只加 overflow-x: auto 到 <table> 上——没用，必须加到**父容器**上，且该父容器需有明确 width 或 max-width
- <code>white-space: nowrap 在单元格里会让长文本拒绝换行，直接撑裂列宽；改用 white-space: normal 或 word-break: break-word 才能配合流式
替代方案比硬调 table 更可靠
当列内容差异大、设备跨度广（从 iPhone 到 4K 屏）时，原生 <table> 很难兼顾可读性与布局稳定性：
- 用 <code>display: grid 模拟表结构：每行一个 div，列用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，天然响应式
- 用 display: flex + flex: 1 分配列宽，配合 flex-shrink: 0 锁定关键列（如操作列）
- 移动端直接用 @media 把表格转成卡片列表，每条记录一个 <section></section>，字段用 <dl></dl> 展示
- 真要保留语义化表格，就别强求“自适应列宽”，而是用 JS 动态计算内容最大宽度再设 <col>，或引入 DataTables 这类库处理复杂响应逻辑
<col>table-layout: fixed 下，列宽完全由两处决定：
- <col> 元素（必须放在 <thead> 之前，且只支持 <code>px、%、em，不支持 fr 或 minmax()）
- 或第一行 <tr> 中的 <code><th>/<code><td> 的 <code>width 声明（后续行所有 width 都被忽略）
关键约束：
- <table> 必须有明确的 <code>width（如 width: 100% 或 width: 800px），否则 fixed 失效，退化为 auto 行为
- min-width / max-width 在 fixed 模式下常被跳过，不要依赖它们控制列宽
- 如果某列没写 <col> 也没在第一行定义 width，它的宽度 = (tableWidth - 已定义列宽总和) / 剩余列数，结果可能是 0 或负值（此时按 0 处理）
流式场景下表格溢出的真正原因
表格本身不“流”，它只是个块级元素。所谓“流式表格”，其实是靠外层容器和 CSS 联动实现的：
- width: 100% 只让表格占满父容器，但列宽仍由内部 layout 规则决定
- 小屏下即使表格宽度缩了，fixed 模式下的列宽（如 <col width="200">）不会自动缩放，必然溢出
- 常见错误是只加 overflow-x: auto 到 <table> 上——没用，必须加到**父容器**上，且该父容器需有明确 width 或 max-width
- <code>white-space: nowrap 在单元格里会让长文本拒绝换行，直接撑裂列宽；改用 white-space: normal 或 word-break: break-word 才能配合流式
替代方案比硬调 table 更可靠
当列内容差异大、设备跨度广（从 iPhone 到 4K 屏）时，原生 <table> 很难兼顾可读性与布局稳定性：
- 用 <code>display: grid 模拟表结构：每行一个 div，列用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，天然响应式
- 用 display: flex + flex: 1 分配列宽，配合 flex-shrink: 0 锁定关键列（如操作列）
- 移动端直接用 @media 把表格转成卡片列表，每条记录一个 <section></section>，字段用 <dl></dl> 展示
- 真要保留语义化表格，就别强求“自适应列宽”，而是用 JS 动态计算内容最大宽度再设 <col>，或引入 DataTables 这类库处理复杂响应逻辑
<table> 很难兼顾可读性与布局稳定性：
- 用 <code>display: grid 模拟表结构：每行一个 div，列用 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，天然响应式
- 用 display: flex + flex: 1 分配列宽，配合 flex-shrink: 0 锁定关键列（如操作列）
- 移动端直接用 @media 把表格转成卡片列表，每条记录一个 <section></section>，字段用 <dl></dl> 展示
- 真要保留语义化表格，就别强求“自适应列宽”，而是用 JS 动态计算内容最大宽度再设 <col>，或引入 DataTables 这类库处理复杂响应逻辑
列宽算法本身不复杂，难的是它和流式容器、字体渲染、换行策略、移动端 viewport 缩放全部耦合在一起——调一个参数，可能五处崩坏。动手前先问清楚：这真是表格该干的活吗？
