今天学习到：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。
eMart 网店系统
功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标
0 查看详情
最终的解决方案是将容器查询应用于表格的父元素。 由于我的表格位于 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：显示表和内联与容器查询不兼容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1149822.html
微信扫一扫 
支付宝扫一扫 
