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> 或 <code><tr> 设置 <code>flex-grow: 1 不会生效——因为 HTML 表格的渲染机制（table-layout）和 Flexbox 是两套互斥的布局模型。浏览器会忽略对 <table>、<code><tr>、<code><td> 等原生表格元素设置的 <code>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 时
真要用原生
| A | B（占满剩余） | C |
-
table-layout: fixed是前提，否则col的width会被内容覆盖 - 中间列不设
width，或设为auto，它才会吃掉剩余空间；但不同浏览器对width="*"解析不一致，建议留空 - 此方案无法响应式收缩，且
<td> 内容溢出时默认不换行，需额外加 <code>word-break: break-word真正想让某一列“自动撑满”，别在
<table> 上硬套 Flex 属性。要么换结构（div + flex/grid），要么接受原生表格的约束逻辑——后者没有真正的“弹性增长”，只有宽度分配权。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
