本质是Flex项目各自按内容伸缩、缺乏列级约束，需用table-layout:fixed或CSS Grid实现列宽统一，而非依赖Flex自身。
在 H5 中用 Flex 布局模拟表格结构时，表头（thead）与内容（tbody）列宽不一致，本质是 Flex 项目各自按内容伸缩、缺乏列级约束。要实现视觉和行为上“列宽一致”，不能靠 Flex 单独完成列对齐，而需结合 table-layout: fixed 或显式宽度控制逻辑。
核心思路：Flex 只管行布局，列宽需外部统一
Flex 容器本身不维护“列”的概念——每一行（如表头行、数据行）都是独立的 flex 容器，子项（th/td）默认按内容分配空间，导致表头列宽和数据列宽错位。解决的关键不是让 Flex “记住列宽”，而是让所有行的对应单元格遵守同一套宽度规则。
推荐方案一：用 table-layout: fixed + 显式宽度（语义正确）
如果你仍使用原生 <table>，这是最可靠、无障碍友好、兼容性好的方式：
- 给
<table>设置table-layout: fixed; width: 100%; - 用
<colgroup><col width="20%"></colgroup>精确定义每列宽度（比在第一行th上设width更稳定） - 确保
<thead>和<tbody>的列数完全一致，且不跨列（colspan需谨慎处理） - 单元格内文本自动换行：加
word-break: break-word; white-space: normal;
推荐方案二：Flex 模拟表格时用 CSS Grid 替代（现代简洁）
若你已用 div + display: flex 构建“伪表格”，建议直接升级为 display: grid：
- 父容器设
display: grid; grid-template-columns: repeat(4, 1fr);（4 列等宽） - 表头与数据行都作为 grid item 放入同一网格容器中，或用
grid-row分层控制 - Grid 天然按列轨道分配空间，无需手动同步宽度，且支持
align-items: start控制单元格内对齐 - 保留语义可加
role="table"、role="row"、role="columnheader"等 ARIA 属性
不推荐但常见误区：纯 Flex + 百分比硬编码
例如给每个 th 和 td 都写 flex: 0 0 25% —— 表面可行，但实际易出问题：
- 边框、padding、gap 计算偏差会导致总宽超 100%，最后一列换行或挤压
- 不同行之间没有宽度联动，当某行有长文本或图片时，该行单元格仍会撑开（除非加
min-width: 0; overflow: hidden;） - 响应式断点切换列数时，需 JS 或媒体查询重写所有宽度，维护成本高
真正稳定的列宽一致性，依赖的是“列轨道”机制（table 或 grid），而非“行内弹性分配”。Flex 适合做行容器，不适合做列协调器。
