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!

Déclaration de ce site Web

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Comment réparer KB5055612 ne parvient pas à s'installer dans Windows 10?

4 Il y a quelques semaines By DDD

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Grow A Garden - Guide de mutation complet

3 Il y a quelques semaines By DDD

Nordhold: Système de fusion, expliqué

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Tutoriel Java

1670

14

Tutoriel CakePHP

1428

52

Tutoriel Laravel

1329

25

Tutoriel PHP

1276

29

Tutoriel C#

1256

24

Afficher plus