table-layout: fixed 是强制等宽的唯一可靠方式，必须显式声明并配合 width 属性（如 width: 100%）和 或第一行 的 width 定义列宽，否则浏览器仍按 auto 模式动态计算列宽导致失控。
table-layout: fixed 是强制等宽的唯一可靠方式
浏览器默认用 table-layout: auto，会根据内容撑开列宽，哪怕你写了 width 也没用。必须显式设为 fixed，表格才按你定义的列宽（或均分）渲染。
关键点：一旦设成 fixed，第一行 <tr> 中的 <code><th> 或 <code><td> 的 <code>width 属性（或 CSS width）才会生效；后续行的单元格宽度被忽略，内容超长会折行或溢出。
- 推荐在
<table> 上直接加 <code>style="table-layout: fixed; width: 100%;" - 列宽优先写在第一行的
<th> 上，比如 <code><th style="width: 20%;"> 或 <code><th style="width: 120px;"> <li>如果所有列没设宽，<code>fixed模式下会均分容器宽度——这是快速实现“视觉等宽”的捷径 - 示例：
A B C D xxx yyyyyyyyy z aa -
<col>的width支持px、%、fr（仅部分新浏览器），但不支持auto或min-content - 若某列内容普遍很长，可给对应
<td> 加 <code>overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防止撑破Flexbox 替代方案只适合简单场景，别硬套表格语义
如果只是要“看起来像表格的等宽布局”，且不需要排序、屏幕阅读器表格导航、打印分页等原生表格能力，用
display: flex+flex: 1更轻量。但注意：这不是真正的表格，
<table> 的语义、ARIA 支持、打印样式、Excel 导出兼容性全部丢失。纯展示型仪表盘卡片或表单栅格可用，数据表格慎用。 <ul> <li>示例结构：<pre class="brush:php;toolbar:false;"><div role="table" class="grid"> <div role="row" class="grid-row"> <div role="columnheader" class="grid-cell">Name</div> <div role="columnheader" class="grid-cell">Age</div> </div> <div role="row" class="grid-row"> <div role="cell" class="grid-cell">Alice</div> <div role="cell" class="grid-cell">32</div> </div> </div></pre> </li> <li>CSS：<code>.grid { display: flex; flex-direction: column; } .grid-row { display: flex; } .grid-cell { flex: 1; } - 缺点：无法固定列高对齐、无原生表头冻结、横向滚动时表头不同步（需 JS 补齐）
-
border-collapse: collapse—— 否则双线边框会让列宽计算失效，尤其在fixed模式下表现诡异 -
box-sizing: border-box应用于<th> 和 <code><td> —— 确保 <code>padding不撑大你设定的width - 如果用了
font-size或line-height差异大的内容，建议统一设置vertical-align: top，避免单元格基线不齐造成“高度不等”的错觉
实际项目中，
用 colgroup 控制列宽更稳定，尤其配合 fixed
<colgroup></colgroup> 是语义正确、浏览器兼容性最好的列级控制方式，比在 <th> 上写 <code>width 更可靠，且不影响可访问性。
注意：<colgroup></colgroup> 必须放在 <table> 内、<code><thead> 前，且 <code><col> 标签不闭合（HTML5 允许自闭合，但建议写 <col> 而非 <col>，避免旧版解析异常）。
容易被忽略的细节：border-collapse 和 box-sizing
即使列宽设对了，边框和内边距仍会导致视觉错位。两个属性必须同步处理：
table-layout: fixed + <colgroup></colgroup> 是最稳的组合。但只要有一列内容长度波动极大，又不允许截断或折行，就别强求“绝对等宽”——这时候该考虑分页、虚拟滚动，或者换用更适合的 UI 组件库。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
