flex-grow 在原生表格元素上无效，因 table 布局与 Flexbox 互斥；需改用 div 模拟表格并设 display: flex，或更优地使用 CSS Grid（如 grid-template-columns: 60px 1fr 120px）；若必须用 table，则依赖 table-layout: fixed 和 colgroup width 分配。
flex-grow 在 table 元素上根本不起作用
直接给 <td> 或 <tr> 设置 flex-grow: 1 不会生效——因为 HTML 表格的渲染机制（table-layout）和 Flexbox 是两套互斥的布局模型。浏览器会忽略对 <table>、<tr>、<td> 等原生表格元素设置的 display: flex 或 flex-grow，除非你彻底放弃语义化表格结构。
用 div 模拟表格并启用 Flexbox
想用 flex-grow 控制宽度分配，必须用块级元素替代原生表格标签，并手动模拟表格行为。关键点在于：容器设为 display: flex，子项（模拟单元格）设置 flex-grow，同时用 flex-basis 或 min-width 防止压缩过度。
常见写法：
<div class="table">
<div class="row">
<div class="cell" style="flex-grow: 0; width: 80px;">固定列</div>
<div class="cell" style="flex-grow: 1;">自动撑满</div>
<div class="cell" style="flex-grow: 0; width: 120px;">操作列</div>
</div>
</div>配套 CSS：
立即学习“前端免费学习笔记（深入）”；
.table { display: table; width: 100%; } /* 可选：仅用于语义或宽高约束 */
.row { display: flex; }
.cell {
min-width: 0; /* 关键：允许内容溢出时 flex item 不撑宽 */
padding: 8px;
}
-
min-width: 0是必须加的，否则文字长时flex-grow会失效 - 避免对
.cell设width（除固定列外），否则会和flex-grow冲突 - 若需多行“表格”，每个
.row都要单独设display: flex，不能只在最外层设
用 CSS Grid 替代 Flex 更适合“表格式布局”
如果你真正需要的是“某列自适应剩余宽度”，CSS Grid 比 Flex 更直观且兼容性足够（IE11+ 支持 grid-template-columns 的基础语法）。
示例：
<div class="grid-table"> <div class="col fixed">ID</div> <div class="col fluid">标题（自动撑满）</div> <div class="col fixed">状态</div> </div>
.grid-table {
display: grid;
grid-template-columns: 60px 1fr 100px;
gap: 0;
}
.fixed { flex-grow: 0; } /* 仅作语义标记，实际由 grid 控制 */
.fluid { min-width: 0; } /* 同样防文本撑宽 */
-
1fr就是“占剩余所有空间”，比flex-grow: 1更精准、无歧义 - 不需要额外处理换行、对齐、跨列等复杂场景时，Grid 的声明式写法更可靠
- 注意：Grid 的
min-width: 0依然必要，尤其当内容含长单词或 URL 时
真要用原生 <table>？只能靠 colgroup + width
如果必须保留 <table> 标签（比如服务端渲染、无障碍要求、或 legacy 系统限制），flex-grow 完全不可用。唯一可控方式是通过 <colgroup> 和 width 属性配合 table-layout: fixed。
示例：
<table style="table-layout: fixed; width: 100%;">
<colgroup>
<col width="80">
<col width="*"> <!-- * 不被标准支持，实际应留空或用 100% -->
<col width="120">
</colgroup>
<tr><td>A</td><td>B（占满剩余）</td><td>C</td></tr>
</table>-
table-layout: fixed是前提，否则col的width会被内容覆盖 - 中间列不设
width，或设为auto，它才会吃掉剩余空间；但不同浏览器对width="*"解析不一致，建议留空 - 此方案无法响应式收缩，且
<td>内容溢出时默认不换行，需额外加word-break: break-word
真正想让某一列“自动撑满”，别在 <table> 上硬套 Flex 属性。要么换结构（div + flex/grid），要么接受原生表格的约束逻辑——后者没有真正的“弹性增长”，只有宽度分配权。
