html表格（）里不能用flex-basis，因为它是flexbox专属属性，而原生及其子元素默认非flex容器，不参与flex布局计算；即使显式设置也完全无效。
直接说结论：HTML表格（ 常见现象是给 真需求其实是：**要表格那样的对齐效果，但用 Flex 实现可控列宽**。这时应放弃 即便结构改成 Flex，以下问题仍高频出现： 真正难的不是选哪个属性，而是意识到：Flex 布局和表格布局是两套互斥的渲染机制。想用 <table>）里不能用 <code>flex-basis —— 因为 flex-basis 是 Flexbox 布局的属性，而原生 <table> 元素及其子元素（<code><tr>、<code><td>）默认不是 flex 容器，也不参与 Flex 分配逻辑。
<h3>为什么在 <code><table> 里写 <code>flex-basis 没反应
<td> 加了 <code>style="flex-basis: 120px;"，但宽度完全不变。原因很直接：
<td> 不是 flex item，除非你手动把它变成 flex item（比如加 <code>display: flex），但这会破坏表格语义和渲染行为
<table> 的布局采用的是独立的「表格算法」，它无视 <code>flex-basis、flex-grow 等所有 Flex 属性
<table> 设了 <code>display: flex，它就不再是表格了——<tr> 会变成普通块级元素，<code><td> 也不会自动对齐成格子，列宽计算彻底失效
<h3>想用 <code>flex-basis 控制“类表格”列宽，该怎么做
<table> 标签，改用语义化或结构化容器 + Flex 布局：
<ul><li>用 <code><div class="table"> 包裹行，<code><div class="row"> 模拟 <code><tr>，<code><div class="cell"> 替代 <code><td>
<li>给 <code>.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-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 只控制内容区，总宽会超出flex-basis（需 -ms-flex-preferred-size: 120px），且不支持 gap，列间间距得靠 margin-right + :last-child 清除如果非要用原生
<table>，怎么近似控制列宽
<p>原生表格里真正生效的宽度控制方式只有这些：</p>
<ul>
<li>给 <code><col> 标签设 width：<col style="width: 120px">（最可靠，浏览器兼容性好）
<th> 或 <code><td> 设 <code>width 属性（HTML 属性，非 CSS）：<td width="120">
<li>CSS 中对 <code><col> 或 <td> 设 <code>width（注意：部分浏览器对 <td> 的 <code>width 支持不稳定，<col> 更稳）
<col> 设宽，一边又给 <td> 写 <code>flex-basis —— 后者根本不起作用，徒增维护成本
flex-basis，就得接受不用 <table>；想用 <code><table>，就得回归 <code>width 和 <col> 这套老办法。强行嫁接，只会让 computed 样式里满屏灰色无效值。
