table-layout: fixed 不能直接靠 width: 100% / 列数实现均分，因为其列宽仅依据第一行单元格或元素的显式宽度决定，不自动均分；必须用等显式声明每列宽度才可靠均分。
table-layout:fixed 为什么不能直接靠 width: 100% / 列数实现均分
因为 table-layout:fixed 下，表格列宽由第一行单元格（<th> 或 <code><td>）的宽度决定，后续行内容再长也不会撑开列；但如果你没显式设置列宽，浏览器会按内容自动分配——根本不会均分。均分不是默认行为，得手动“干预”第一行。
<h3>用 colgroup + width 百分比强制均分（最稳方案）</h3>
<p>必须用 <code><colgroup></colgroup> 配合 <col> 显式声明每列宽度，且总和为 100%。这是唯一能绕过内容干扰、真正实现等宽的可靠方式。
实操要点：
-
<colgroup></colgroup>必须紧贴<table> 开始后，不能放在 <code><thead> 里 <li>每列 <code><col width="25%">，4 列就写 4 个，不要用flex或grid模拟 - 第一行
<tr> 的单元格无需设 <code>width，设了反而可能冲突 - 如果列数动态，就得 JS 生成
<col>，纯 CSS 无法计算“100% / n”
| A | B | C | D |
|---|---|---|---|
| 超长文本会截断或省略 | 不会撑开整列 | 保持等宽 | 是的 |
text-overflow: ellipsis 在 fixed 表格里为啥不生效
因为 text-overflow: ellipsis 要求元素同时满足：块级、overflow: hidden、white-space: nowrap、有明确宽度。而 <td> 默认是 table-cell，不响应这些规则。
<p>修复方法（加在 <code><td> 或 <code><th> 上）：
<ul>
<li>加 <code>display: block（或 inline-block），让它变成块上下文
overflow: hidden; white-space: nowrap; text-overflow: ellipsis
<td> 宽度已由 <code><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>/<code><td> 上，且需配合 <code>table-layout:fixed+overflow:hidden才可控 - 移动端 WebView（如微信内核）建议统一用固定像素列宽，避免渲染抖动
均分这件事，表面是 CSS 属性，实际卡点全在「谁说了算」：是内容、是 col、还是第一行单元格。漏掉 <colgroup></colgroup>，或者忘了它必须在 <thead> 前，就永远得不到真均分。</thead>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
