CSS peut-il contrôler la largeur des cellules du tableau quelle que soit la taille du contenu ?

Contrôler la largeur des cellules d'un tableau avec CSS

Dans le domaine des tableaux HTML, garantir la largeur uniforme des cellules d'un tableau peut être un défi lorsqu'il s'agit de contenu de différentes tailles. Pouvons-nous atteindre ce résultat souhaité uniquement via CSS, quel que soit le nombre de cellules impliquées ?

La structure HTML est simple : un parent

sert de conteneur de table, tandis que l'enfant

les éléments représentent les cellules du tableau.

<code class="html"><div style="display: table;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div></code>

CSS peut être exploité pour résoudre ce problème. Pour garantir des largeurs de cellule égales, quelle que soit la taille du contenu, nous devons :

1. Déclencher le mécanisme de disposition de tableau fixe : Définir la disposition de la table : fixe ; sur le parent
   . Cela demande au navigateur d'appliquer les largeurs de cellules spécifiées plutôt que de les ajuster automatiquement au contenu.
2. Attribuer une largeur aux cellules du tableau : Bien que cela ne soit pas obligatoire, l'attribution d'une petite largeur (par exemple, 2 %) à chaque
   représentant une cellule de tableau agit comme un déclencheur pour la disposition fixe du tableau.

Le code CSS final apparaît comme suit :

<code class="css">div {
  display: table;
  width: 250px;
  table-layout: fixed;
}

div > div {
  display: table-cell;
  width: 2%;
}</code>

Avec cette approche, les cellules du tableau conserveront l'égalité largeurs, assurant une apparence cohérente quel que soit leur contenu.

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!

css html for while auto number this table issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment aligner les étiquettes à côté des entrées dans les formulaires ?Article suivant：Comment aligner les étiquettes à côté des entrées dans les formulaires ?

Articles Liés

Voir plus

• Comment puis-je identifier de manière fiable un navigateur portable sur des appareils mobiles ?
• Pourquoi les transitions CSS ne fonctionnent-elles pas avec la visibilité ?
• Où dois-je placer mes fichiers CSS et JavaScript en HTML ?
• Comment obtenir des colonnes de même largeur dans une grille CSS ?
• Comment appliquer des styles de curseur lors de la désactivation des événements de survol avec « pointer-events : none » ?