#TIL : la table d'affichage et la table en ligne sont incompatibles avec les requêtes de conteneur

Notes d'étude : Conflit entre la requête du conteneur et le mode d'affichage de la table

J'ai récemment rencontré un problème dans le composant web : je dois masquer certaines colonnes du tableau en fonction de la largeur de l'écran.

Supposons que vous deviez masquer les deuxième et troisième colonnes du tableau (y compris l'en-tête et les cellules), le code CSS est le suivant :

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

J'ai essayé d'utiliser une requête conteneur pour masquer ces colonnes uniquement sur des écrans étroits (moins de 600 px) :

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

Cependant, ce code ne fonctionne pas. La raison en est que les requêtes de conteneur ne sont compatibles qu'avec des valeurs display spécifiques :

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

Les valeurs display incompatibles incluent : inline, contents, none et toutes les valeurs display liées aux tables : table, table-row-group, table-header-group, table-footer-group, table-row, table-cell, table-column-group, table-column, table-caption.

La solution de contournement consiste à appliquer une requête conteneur à l'élément parent de la table. Ma table se trouve à l'intérieur d'un composant Web et la valeur display par défaut du composant Web est inline. Remplacez l'attribut display du composant par block pour résoudre le problème :

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

Le sélecteur :host est utilisé dans le code car mon style est dans Shadow DOM et la portée de la requête du conteneur est limitée par Shadow DOM. Si vous utilisez Light DOM, vous pouvez utiliser le nom de balise avec trait d'union du composant. Cette approche ne détruit pas la sémantique du tableau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!