table-layout: fixed 不能直接靠 width: 100% / 列数实现均分，因为其列宽仅依据第一行单元格或<col>元素的显式宽度决定，不自动均分；必须用<colgroup><col width="25%">等显式声明每列宽度才可靠均分。
table-layout:fixed 为什么不能直接靠 width: 100% / 列数实现均分
因为 table-layout:fixed 下，表格列宽由第一行单元格（<th> 或 <td>）的宽度决定，后续行内容再长也不会撑开列；但如果你没显式设置列宽，浏览器会按内容自动分配——根本不会均分。均分不是默认行为，得手动“干预”第一行。
用 colgroup + width 百分比强制均分（最稳方案）
必须用 <colgroup> 配合 <col> 显式声明每列宽度，且总和为 100%。这是唯一能绕过内容干扰、真正实现等宽的可靠方式。
实操要点：
-
<colgroup>必须紧贴<table>开始后，不能放在<thead>里 - 每列
<col width="25%">，4 列就写 4 个，不要用flex或grid模拟 - 第一行
<tr>的单元格无需设width，设了反而可能冲突 - 如果列数动态，就得 JS 生成
<col>，纯 CSS 无法计算“100% / n”
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tbody><tr><td>超长文本会截断或省略</td><td>不会撑开整列</td><td>保持等宽</td><td>是的</td></tr></tbody>
</table>
text-overflow: ellipsis 在 fixed 表格里为啥不生效
因为 text-overflow: ellipsis 要求元素同时满足：块级、overflow: hidden、white-space: nowrap、有明确宽度。而 <td> 默认是 table-cell，不响应这些规则。
立即学习“前端免费学习笔记（深入）”；
修复方法（加在 <td> 或 <th> 上）：
- 加
display: block（或inline-block），让它变成块上下文 - 加
overflow: hidden; white-space: nowrap; text-overflow: ellipsis - 确保父
<td>宽度已由<col>固定，否则 block 元素会按内容撑开
IE 和旧版 Safari 对 col width 百分比的支持差异
IE8+ 和现代 Chrome/Firefox 都支持 <col width="25%">，但 Safari ≤15.6 在某些嵌套布局中会忽略百分比，只认像素值。如果兼容性要求高：
- 用 JS 读取表格宽度，算出每列像素值再赋给
<col>的style.width - 或者退回到
width: calc(100% / 4)—— 但注意：<col>不支持calc()，只能用在<th>/<td>上，且需配合table-layout:fixed+overflow:hidden才可控 - 移动端 WebView（如微信内核）建议统一用固定像素列宽，避免渲染抖动
均分这件事，表面是 CSS 属性，实际卡点全在「谁说了算」：是内容、是 col、还是第一行单元格。漏掉 <colgroup>，或者忘了它必须在 <thead> 前，就永远得不到真均分。
