inline-size对html表格无效，浏览器表格布局算法会忽略它；真正起效的是width配合colgroup、table-layout:fixed及writing-mode等组合控制。

inline-size 对 HTML 表格无效，别白费劲

inline-size 是 CSS 逻辑属性，对应 width（块级）或 height（内联级），但它**不适用于 <table>、<code><tr>、<code><td> 等表格元素的布局计算**。浏览器对表格的宽度控制遵循 table layout algorithm，会忽略 <code>inline-size，即使你显式设置了 display: inline-table 或 display: table-cell，多数引擎（Chrome/Firefox/Safari）仍不将其作为有效尺寸声明。

真正起作用的逻辑宽度写法：用 width + writing-mode 组合

想按逻辑方向（比如从左到右时的“行内尺寸”）控制表格列宽，得靠 width 配合 writing-mode 和 direction。表格本身不响应 inline-size，但你可以把 <td> 或包裹容器设为 <code>display: inline-block 或 display: flow-root，再施加逻辑尺寸：

• width 在默认 writing-mode: horizontal-tb 下就是逻辑上的 inline-size
• 若切换为 writing-mode: vertical-lr，则 width 变成垂直方向尺寸，此时 inline-size 才等价于原 height
• 直接对 <table> 设 <code>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> 或 <code><td> 设 <code>min-inline-size: 120px + max-inline-size: none，配合 table-layout: fixed
  • 避免在 <td> 上单独设 <code>inline-size —— 它会被表格算法重置，优先级低于 col 或 table-layout 规则

    容易踩的坑：table-layout 和 inline-size 的冲突

    启用 table-layout: fixed 后，表格宽度由第一行 <col> 或首行单元格 width 决定，此时任何 inline-size 声明都会被丢弃。常见错误现象：

    

    Wechat HTML Publisher

    直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

    下载
    • 写了 td { inline-size: 200px }，但列宽没变 —— 因为 table-layout: auto 下它被内容撑开，fixed 下又被 <col> 覆盖
    • 用 inline-size 设置 <table> 宽度，结果整个表格缩成一行 —— 实际是浏览器 fallback 到 <code>width: auto，再按内容最小宽度渲染
    • 在 RTL 页面中误以为 inline-size 会自动翻转列顺序 —— 不会，列顺序由 HTML 结构和 direction 共同决定，inline-size 本身不改变 DOM 流

    逻辑维度的宽度控制，在表格场景里本质是“用对地方 + 选对载体”，inline-size 不是入口，width 加 col 或 min-inline-size 加 table-layout: fixed 才是实际路径。别在 <table> 标签上试 <code>inline-size，浪费调试时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！