#TIL: Anzeigetabelle und Inline sind nicht mit Containerabfragen kompatibel

Studiennotizen: Konflikt zwischen Containerabfrage und Tabellenanzeigemodus

Ich bin kürzlich auf ein Problem in der Webkomponente gestoßen: Ich muss einige Spalten in der Tabelle entsprechend der Bildschirmbreite ausblenden.

Angenommen, Sie müssen die zweite und dritte Spalte der Tabelle (einschließlich Kopfzeile und Zellen) ausblenden. Der CSS-Code lautet wie folgt:

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

Ich habe versucht, eine Containerabfrage zu verwenden, um diese Spalten nur auf schmalen Bildschirmen (weniger als 600 Pixel) auszublenden:

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

Dieser Code funktioniert jedoch nicht. Der Grund dafür ist, dass Containerabfragen nur mit bestimmten display-Werten kompatibel sind:

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

Inkompatible display-Werte umfassen: inline, contents, none und alle tabellenbezogenen display-Werte: table, table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption.

Die Problemumgehung besteht darin, eine Containerabfrage auf das übergeordnete Element der Tabelle anzuwenden. Meine Tabelle befindet sich in einer Webkomponente und der Standardwert display der Webkomponente ist inline. Ändern Sie das display-Attribut der Komponente in block, um das Problem zu lösen:

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

Der Selektor :host wird im Code verwendet, da mein Stil im Shadow DOM liegt und der Umfang der Containerabfrage durch Shadow DOM begrenzt ist. Wenn Sie Light DOM verwenden, können Sie den Tag-Namen der Komponente mit Bindestrich verwenden. Dieser Ansatz zerstört nicht die Semantik der Tabelle.

Das obige ist der detaillierte Inhalt von#TIL: Anzeigetabelle und Inline sind nicht mit Containerabfragen kompatibel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!