container-type 必须设在表格的包裹容器（如<div class="table-wrapper">）上，而非<table>元素本身；@container仅支持min/max-width/height且需带单位，不支持width或比较运算符；需兼容旧浏览器并避免display: contents等无效容器。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

container-type 必须设在表格父容器上，不是

自身

直接给 <table> 元素加 container-type: inline-size 是无效的——<table> 默认是替换元素，且不参与常规盒模型尺寸计算，浏览器无法稳定测量其宽度。真正能触发 @container 的必须是它的**包裹容器**（比如 <div class="table-wrapper">）。

常见错误现象：写了 @container (min-width: 400px) { ... } 却完全没反应，检查 DOM 结构后发现 container-type 错加在了 <table> 或 <tbody> 上。

• 正确做法：用一个 <div> 包住整个表格，并在其 CSS 中声明 container-type: inline-size
• 如果该 <div> 是 Flex/Grid 子项，需额外加 min-width: 0 或 width: fit-content，否则 flex 会强制撑满导致宽度不可测
• 避免用 display: contents 或 display: none 的父元素当容器——它们没有渲染盒，尺寸为 0

@container 规则里不能用 width，要用 min-width / max-width

@container (width > 600px) 是无效语法，浏览器会直接忽略整条规则。Container Queries 只支持 min-width、max-width、min-height、max-height 四种条件，且必须带单位（如 px、em），不支持无单位数值或 width 这类属性名。

典型翻车场景：复制别人代码时漏掉 min- 前缀，或把媒体查询习惯带进来写成 @container (width: 400px)，结果样式死活不生效。

立即学习“前端免费学习笔记（深入）”；

• 正确写法：@container (min-width: 400px) { .data-cell { font-size: 1rem; } }
• 不支持比较运算符（>、<），只能用 min/max 表达区间
• 条件中不能嵌套媒体查询，也不能混用 and 多条件（如 (min-width: 400px) and (max-width: 800px) 尚未被广泛支持，当前应拆成两条独立规则）

表格内部结构响应逻辑要分层设计

表格本身是刚性结构，@container 无法让 <th> 或 <td> “自动换行”或“隐藏列”，它只负责触发样式切换。真正的响应行为得靠 CSS 主动控制，比如改 display、visibility 或用 grid 重构布局。

例如：小容器下把表格转为卡片列表，大容器下恢复表格形态——这不是 @container 自动完成的，而是你写的 CSS 在响应。

• 小容器方案：用 @container (max-width: 480px) { .table-wrapper { display: grid; } .table-row { display: contents; } .table-cell { display: flex; flex-direction: column; } }
• 避免对 <tr> 直接设 display: block——这会破坏表格语义和屏幕阅读器支持，优先用 display: contents 解构再重组
• 列宽控制别依赖 width 百分比，改用 minmax() + grid-template-columns 配合容器查询更可靠

兼容性兜底必须手动处理，没有自动 fallback

@container 在 Chrome 105+、Firefox 110+、Safari 16+、Edge 105+ 已稳定支持，但旧版浏览器（尤其是 Safari ≤15.6）完全不识别该语法，也不会降级执行任何样式。它不像 @media 那样有渐进增强基础——不支持就是静默跳过整块规则。

这意味着：如果你只写 @container 而不配 @media，在不支持的环境下表格会永远卡在默认状态（比如始终横排，哪怕容器只有 200px 宽）。

• 务实做法：用 @media 设基础断点（如视口 max-width: 768px），再用 @container 在支持环境中叠加更精细控制
• 不要指望 @supports (container-type: inline-size) 能完美检测——部分旧引擎会误报支持，实际不生效
• 关键交互（如列排序、导出）仍需 JavaScript 判断容器尺寸，CSS 查询无法触发 JS 逻辑

最易被忽略的一点：容器宽度测量依赖渲染后的实际像素值，如果父元素用了 overflow: hidden 或 transform，可能截断布局盒导致宽度读数为 0——临时加 outline: 1px solid red 看它是否真实撑开，比查文档更快定位问题。