如何在HTML表格中通过container-type实现表格容器查询响应式布局-html教程-PHP中文网

container-type不能用于html表格元素，因其不满足容器查询要求的bfc根条件且display类型被明确排除；应改用div包裹表格并设置container-type。

如何在html表格中通过container-type实现表格容器查询响应式布局

container-type 不能用于 HTML 表格元素（<table>、<code><tr>、<code><td> 等），这是当前（Chrome 110+ / Firefox 119+ / Safari 17.4+）CSS 容器查询规范的明确限制。<h3> <code>container-type 对 <table> 元素无效<ul> <li>CSS 容器查询要求容器必须是 <strong>块级格式化上下文（BFC）根元素</strong>，且不能是表格相关显示类型（<code>display: table、table-cell、table-row 等）。

<table> 默认 <code>display: table，<td> 默认 <code>display: table-cell，二者均被浏览器明确排除在容器查询支持之外。

尝试设置 container-type: inline-size 在 <table> 上会静默失效 —— DevTools 中该声明会被划掉，且 <code>@container 规则完全不触发。

替代方案：用 `div` 包裹并启用容器查询

真正可行的做法是绕过表格本身，把响应式逻辑移到其外层容器：

把 <table> 放进一个 <code><div class="table-container"><li>在该 <code><div> 上设置 <code>container-type: inline-size
用 @container 查询该容器宽度，控制内部表格或单元格行为（如切换为滚动、隐藏列、调整字体）

<div class="table-container">
  <table>
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>

.table-container { container-type: inline-size; }

@container (max-width: 400px) {
.table-container table { display: block; overflow-x: auto; }
.table-container th, .table-container td { min-width: 120px; }
}

注意：overflow-x: auto 需配合 display: block 才能让表格水平滚动；直接对 <table> 设 <code>overflow 无效。

表格内部无法用容器查询做“列级响应式”

你不能对 <th> 或 <code><td> 单独设 <code>container-type —— 它们既不是 BFC 根，也不支持该属性。试图写：

th { container-type: inline-size; } → 无效，被忽略

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

常见误操作是给 <td> 加 <code>display: flow-root 再设容器类型，但即使这样，表格布局模型仍会覆盖容器查询行为，最终不生效。