"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > CSS peut-il contrôler la largeur des cellules du tableau quelle que soit la taille du contenu ?

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

Publié le 2024-11-07
Parcourir:917

Can CSS Control Table Cell Widths Regardless of Content Size?

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 les éléments
enfants représentent la table. cellules.

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 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 du tableau agit comme un déclencheur pour la disposition fixe du tableau.

    Le code CSS final apparaît comme suit :

    div {
      display: table;
      width: 250px;
      table-layout: fixed;
    }
    
    div > div {
      display: table-cell;
      width: 2%;
    }

    Avec cette approche, les cellules du tableau conserveront des largeurs égales, garantissant une apparence cohérente quel que soit leur contenu.

Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3