#TIL: 表示テーブルとインラインはコンテナ クエリと互換性がありません

研究メモ: コンテナクエリとテーブル表示モードの間の競合

最近、Web コンポーネントで問題が発生しました。画面の幅に応じてテーブル内のいくつかの列を非表示にする必要があります。

テーブルの 2 番目と 3 番目の列 (ヘッダーとセルを含む) を非表示にする必要があるとします。CSS コードは次のとおりです:

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

コンテナ クエリを使用して、狭い画面 (600 ピクセル未満) でのみこれらの列を非表示にしてみました:

<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>

私のスタイルは Shadow DOM にあり、コンテナー クエリのスコープは Shadow DOM によって制限されているため、コード内で :host セレクターが使用されています。 Light DOM を使用する場合は、コンポーネントのハイフンでつながれたタグ名を使用できます。 このアプローチでは、テーブルのセマンティクスは破壊されません。

以上が#TIL: 表示テーブルとインラインはコンテナ クエリと互換性がありませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。