#TIL：显示表和内联与容器查询不兼容

学习笔记：容器查询与表格显示模式的冲突

最近在网页组件中遇到一个问题：需要根据屏幕宽度隐藏表格中的某些列。

假设需要隐藏表格的第二列和第三列（包括表头和单元格），CSS代码如下：

<code class="language-css">:is(th, td):is(:nth-child(2), :nth-child(3)) {
    display: none;
}</code>

我尝试使用容器查询，只在窄屏幕（小于600px）时隐藏这些列：

<code class="language-css">table { /* 这部分不起作用 */
  container-type: inline-size;
}

/* 窄屏幕下隐藏第二列和第三列 */
:is(td, th):is(:nth-child(2), :nth-child(3)) {
  @container (width < 600px) {
    display: none;
  }
}</code>

然而，这段代码并没有生效。原因是容器查询仅兼容特定的 display 值：

<code>- block
- inline-block
- flex
- inline-flex
- grid
- inline-grid
- flow-root</code>

不兼容的 display 值包括：inline，contents，none，以及所有表格相关的 display 值：table，table-row-group，table-header-group，table-footer-group，table-row，table-cell，table-column-group，table-column，table-caption。

解决方法是将容器查询应用于表格的父元素。我的表格位于一个Web组件内，而Web组件默认的 display 值为 inline。 将组件的 display 属性改为 block 即可解决问题：

<code class="language-css">:host {
  container-type: inline-size;
  display: block;
}

/* 窄屏幕下隐藏第二列和第三列 */
:is(td,th):is(:nth-child(2),:nth-child(3)) {
  @container (width < 600px) {
    display: none;
  }
}</code>

代码中使用了 :host 选择器，因为我的样式在 Shadow DOM 中，容器查询的范围受 Shadow DOM 限制。如果使用 Light DOM，则可以使用组件的带连字符的标签名称。 这种方法不会破坏表格的语义。

以上是#TIL：显示表和内联与容器查询不兼容的详细内容。更多信息请关注PHP中文网其他相关文章！