#TIL：顯示表和內聯與容器查詢不相容

學習筆記：容器查詢與表格顯示模式的衝突

最近在網頁元件中遇到一個問題：需要根據螢幕寬度隱藏表格中的某些欄位。

假設需要隱藏表格的第二列和第三列（包括表頭和儲存格），CSS程式碼如下：

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

我嘗試使用容器查詢，只在窄螢幕（小於600px）時隱藏這些欄位：

table { /* 这部分不起作用 */
  container-type: inline-size;
}

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

然而，這段程式碼並沒有生效。原因是容器查詢僅相容於特定的 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 即可解決問題：

: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 中，容器查詢的範圍受 Shadow DOM 限制。如果使用 Light DOM，則可以使用元件的帶連字符的標籤名稱。 這種方法不會破壞表格的語意。

以上是#TIL：顯示表和內聯與容器查詢不相容的詳細內容。更多資訊請關注PHP中文網其他相關文章！