HTML表格（<table>）里不能用flex-basis，因为它是Flexbox专属属性，而原生<table>及其子元素默认非flex容器，不参与Flex布局计算；即使显式设置也完全无效。
直接说结论：HTML表格（<table>）里不能用 flex-basis —— 因为 flex-basis 是 Flexbox 布局的属性，而原生 <table> 元素及其子元素（<tr>、<td>）默认不是 flex 容器，也不参与 Flex 分配逻辑。
为什么在 <table> 里写 flex-basis 没反应
常见现象是给 <td> 加了 style="flex-basis: 120px;"，但宽度完全不变。原因很直接：
-
<td>不是 flex item，除非你手动把它变成 flex item（比如加display: flex），但这会破坏表格语义和渲染行为 - 浏览器对
<table>的布局采用的是独立的「表格算法」，它无视flex-basis、flex-grow等所有 Flex 属性 - 即使你给
<table>设了display: flex，它就不再是表格了——<tr>会变成普通块级元素，<td>也不会自动对齐成格子，列宽计算彻底失效
想用 flex-basis 控制“类表格”列宽，该怎么做
真需求其实是：**要表格那样的对齐效果，但用 Flex 实现可控列宽**。这时应放弃 <table> 标签，改用语义化或结构化容器 + Flex 布局：
- 用
<div class="table">包裹行，<div class="row">模拟<tr>，<div class="cell">替代<td> - 给
.row设display: flex，给每个.cell设flex: 0 0 120px（即flex-grow: 0、flex-shrink: 0、flex-basis: 120px） - 若需等宽列，统一用
flex: 1，并确保父容器有明确宽度或min-width - 如需响应式，把
flex-basis改成百分比（如flex: 0 0 25%）或配合媒体查询切换
flex-basis 在类表格布局中容易被忽略的坑
即便结构改成 Flex，以下问题仍高频出现：
立即学习“前端免费学习笔记（深入）”；
-
flex-basis: 0%在旧版 Safari（≤15.4）中可能回退为auto，导致列宽失控；优先用flex: 0 0 0px或显式flex-basis: 0px - 没加
min-width: 0：文字内容长时，flex-basis: 120px会被隐式最小尺寸拦截，实际宽度 >120px；横轴布局必须补min-width: 0 - 盒模型干扰：若
.cell有padding或border，又没设box-sizing: border-box，那flex-basis: 120px只控制内容区，总宽会超出 - IE11 不支持
flex-basis（需-ms-flex-preferred-size: 120px），且不支持gap，列间间距得靠margin-right+:last-child清除
如果非要用原生 <table>，怎么近似控制列宽
原生表格里真正生效的宽度控制方式只有这些：
- 给
<col>标签设width：<col style="width: 120px">（最可靠，浏览器兼容性好） - 给
<th>或<td>设width属性（HTML 属性，非 CSS）：<td width="120"> - CSS 中对
<col>或<td>设width（注意：部分浏览器对<td>的width支持不稳定，<col>更稳） - 避免混用：不要一边用
<col>设宽，一边又给<td>写flex-basis—— 后者根本不起作用，徒增维护成本
真正难的不是选哪个属性，而是意识到：Flex 布局和表格布局是两套互斥的渲染机制。想用 flex-basis，就得接受不用 <table>；想用 <table>，就得回归 width 和 <col> 这套老办法。强行嫁接，只会让 computed 样式里满屏灰色无效值。
