Simuler la largeur minimale sur une colonne de tableau

Le bon vieux <table> est le code HTML le plus sémantique pour afficher des données tabulaires. Mais je trouve très difficile de contrôler la présentation du tableau, en particulier la largeur des colonnes dans un environnement dynamique où vous ne savez peut-être pas combien de contenu entre dans chaque cellule du tableau. Dans certains cas, une colonne est super large tandis que d'autres sont froissées. D'autres fois, nous obtenons des largeurs égales, mais au détriment d'une colonne qui contient plus de contenu et nécessite plus d'espace.

Mais j'ai trouvé une solution de contournement CSS tricks-y qui aide à rendre les choses un peu plus faciles. C'est ce que je veux vous montrer dans ce post.

Le problème

Nous devons d'abord comprendre comment la mise en page est gérée par le navigateur. Nous avons le table-layout propriété en CSS pour définir comment un tableau doit répartir la largeur de chaque colonne de tableau. Il prend l'une des deux valeurs suivantes :

• auto (Par défaut)
• fixed

Commençons par un tableau sans définir de largeurs sur ses colonnes. En d'autres termes, nous laisserons le navigateur décider de la largeur à donner à chaque colonne en appliquant table-layout: auto dessus en CSS. Comme vous le remarquerez, le navigateur fait de son mieux avec l'algorithme dont il dispose pour diviser toute la largeur disponible entre chaque colonne.

Si nous échangeons une disposition de table automatique avec table-layout: fixed, le navigateur divisera simplement l'espace total disponible par le nombre total de colonnes, puis appliquera cette valeur comme largeur pour chaque colonne :

Mais que se passe-t-il si nous voulons contrôler la largeur de nos colonnes ? Nous avons le <colgroup> élément pour aider! Il se compose d'individuels <col> éléments que nous pouvons utiliser pour spécifier la largeur exacte dont nous avons besoin pour chaque colonne. Voyons comment cela fonctionne avec table-layout: auto:

J'ai aligné les styles à des fins d'illustration.

Le navigateur ne respecte pas les largeurs en ligne car elles dépassent la quantité d'espace table disponible lorsqu'elles sont additionnées. Par conséquent, la table vole de l'espace dans les colonnes afin que toutes les colonnes soient visibles. C'est un comportement par défaut parfaitement correct.

Comment la <colgroup> travailler avec table-layout: fixed. Découvrons-le:

Cela n'a pas l'air bon du tout. Nous avons besoin que la colonne contenant beaucoup de contenu fléchisse un peu tout en conservant une largeur fixe pour le reste des colonnes. Un fixe table-layout la valeur respecte la largeur — mais à tel point qu'elle engloutit l'espace de la colonne qui a le plus besoin d'espace… ce qui est interdit pour nous.

Cela pourrait facilement être résolu si seulement nous pouvions définir un min-width sur la colonne au lieu d'un width. De cette façon, la colonne dirait: "Je peux vous donner à tous une partie de ma largeur jusqu'à ce que nous atteignions cette valeur minimale." Ensuite, la table déborderait simplement de son conteneur et donnerait à l'utilisateur un défilement horizontal pour afficher le reste de la table. Mais malheureusement, min-width sur les colonnes du tableau ne sont pas respectées par le <col> .

La solution

La solution est de simuler un min-width et nous devons être un peu créatifs pour le faire.

Nous pouvons ajouter un vide <col> comme deuxième colonne pour notre <colgroup> dans le HTML et appliquez un colspan attribut sur la première colonne afin que la première colonne occupe l'espace pour les deux colonnes :

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

Notez que j'ai ajouté des classes à la place des styles en ligne de l'exemple précédent. La même idée s'applique toujours : nous appliquons des largeurs à chaque colonne.

L'astuce est cette relation entre le premier <col> et la seconde vide <col>. Si nous appliquons une largeur au premier <col> (ses 200px dans l'extrait ci-dessus), la deuxième colonne sera consommée lorsque la disposition de table fixe divisera l'espace disponible à distribuer aux colonnes. Mais la largeur de la première colonne (200px) est respecté et reste en place.

Voilà! Nous avons un faux min-width défini sur une cellule de tableau. La première cellule fléchit à mesure que l'espace disponible change et que la table déborde pour le défilement horizontal, comme nous l'espérions.

(j'ai rajouté un peu positionnement collant à la première colonne ici.)

Accessibilité

N'oublions pas totalement l'accessibilité ici. J'ai parcouru le tableau via NVDA sur Windows et VoiceOver sur macOS et j'ai constaté que les cinq colonnes sont annoncées, même si nous n'en utilisons que quatre. Et lorsque la première colonne est mise au point, elle annonce « Colonne un à deux ». Pas parfaitement élégant mais ne va pas non plus faire perdre quelqu'un. J'imagine que nous pourrions jeter un aria-hidden attribut sur la colonne inutilisée, mais sachez également qu'ARIA ne remplace pas un code HTML médiocre.

---

J'admets que ça fait un peu, hum, hacky. Mais, il fonctionne! Faites-moi savoir si vous avez une approche différente dans les commentaires… ou si vous connaissez les confusions que ce "hack" pourrait apporter à nos utilisateurs.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://css-tricks.com/faking-min-width-on-a-table-column/