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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《#TIL：显示表和内联与容器查询不兼容》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

今天学习到：display: table 与容器查询不兼容！

我有一个 web 组件，其中包含一个需要隐藏某些列（宽度较小的非关键列）的表格。

最初，我尝试使用以下 CSS 代码隐藏表格的第二列和第三列（适用于表头和普通单元格）：

:is(th, td):is(:nth-child(2), :nth-child(3)) {
    display: none;
}

为了仅在视窗宽度小于 600 像素时隐藏这些列，我尝试使用容器查询：

table { /* 这部分无效 */
  container-type: inline-size;
}

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

然而，问题出现了：display: table 与容器查询不兼容。 容器查询仅支持以下 display 值：block, inline-block, flex, inline-flex, grid, inline-grid, flow-root。 table 及其相关属性（table-row, table-cell 等）都不在支持列表中。

我尝试了各种 display 值，发现很多值都不兼容，包括 inline，以及一些不常用的值，例如 ruby 和 ruby-text-container。

最终的解决方案是将容器查询应用于表格的父元素。 由于我的表格位于 web 组件内部，而 web 组件默认 display: inline，因此我修改了组件的样式：

:host {
  container-type: inline-size;
  display: block;
}

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

我使用了 :host 选择器，因为我的样式在 shadow DOM 内部。 如果使用 light DOM，则应使用组件的连字符命名法。 将组件的 display 属性设置为 block 并不会破坏表格的语义。 这样，容器查询就能正常工作了。

到这里，我们也就讲完了《#TIL：显示表和内联与容器查询不兼容》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！