inline-size对HTML表格无效，浏览器表格布局算法会忽略它；真正起效的是width配合colgroup、table-layout:fixed及writing-mode等组合控制。
inline-size 对 HTML 表格无效，别白费劲
inline-size 是 CSS 逻辑属性，对应 width（块级）或 height（内联级），但它**不适用于 <table>、<tr>、<td> 等表格元素的布局计算**。浏览器对表格的宽度控制遵循 table layout algorithm，会忽略 inline-size，即使你显式设置了 display: inline-table 或 display: table-cell，多数引擎（Chrome/Firefox/Safari）仍不将其作为有效尺寸声明。
真正起作用的逻辑宽度写法：用 width + writing-mode 组合
想按逻辑方向（比如从左到右时的“行内尺寸”）控制表格列宽，得靠 width 配合 writing-mode 和 direction。表格本身不响应 inline-size，但你可以把 <td> 或包裹容器设为 display: inline-block 或 display: flow-root，再施加逻辑尺寸：
-
width在默认writing-mode: horizontal-tb下就是逻辑上的inline-size - 若切换为
writing-mode: vertical-lr，则width变成垂直方向尺寸，此时inline-size才等价于原height - 直接对
<table>设inline-size: 300px—— 不生效，DevTools 里能看到被划掉
表格列宽的实际控制手段：colgroup + logical width 属性
HTML 表格列宽必须通过 <col> 或 CSS 的 column-width（仅对 display: table-column 有效）干预。但注意：column-width 是弹性提示值，不是强制约束。真正可靠的方式是：
- 用
<colgroup><col style="width: 150px"></colgroup>—— 这里的width在 LTR 下即逻辑内联尺寸 - 对
<th>或<td>设min-inline-size: 120px+max-inline-size: none，配合table-layout: fixed - 避免在
<td>上单独设inline-size—— 它会被表格算法重置，优先级低于col或table-layout规则
容易踩的坑：table-layout 和 inline-size 的冲突
启用 table-layout: fixed 后，表格宽度由第一行 <col> 或首行单元格 width 决定，此时任何 inline-size 声明都会被丢弃。常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写了
td { inline-size: 200px }，但列宽没变 —— 因为table-layout: auto下它被内容撑开，fixed下又被<col>覆盖 - 用
inline-size设置<table>宽度，结果整个表格缩成一行 —— 实际是浏览器 fallback 到width: auto，再按内容最小宽度渲染 - 在 RTL 页面中误以为
inline-size会自动翻转列顺序 —— 不会，列顺序由 HTML 结构和direction共同决定，inline-size本身不改变 DOM 流
逻辑维度的宽度控制，在表格场景里本质是“用对地方 + 选对载体”，inline-size 不是入口，width 加 col 或 min-inline-size 加 table-layout: fixed 才是实际路径。别在 <table> 标签上试 inline-size，浪费调试时间。
