web-dev-qa-db-fra.com

Des cellules de tableau de taille égale pour remplir toute la largeur du tableau conteneur

Existe-t-il un moyen d'utiliser HTML/CSS (avec une taille relative) pour faire en sorte qu'une rangée de cellules étire toute la largeur du tableau dans lequel elle est contenue?

Les cellules doivent avoir la même largeur et la taille de la table externe est également dynamique avec <table width="100%">.

Actuellement, si je ne spécifie pas une taille fixe; les cellules se réduisent simplement pour s'adapter à leur contenu.

htmlcsshtml-table
88
yogibear

Vous n'avez même pas besoin de définir une largeur spécifique pour les cellules, table-layout: fixed suffit de répartir les cellules uniformément. Voir ceci jsfiddle , testé sur IE8.

Notez que pour table-layout pour travailler, l’élément stylé de la table doit avoir une largeur définie (100% dans mon exemple).

138
Simon

Il suffit d’utiliser des largeurs en pourcentage et disposition de la table fixe :

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

avec

table { table-layout: fixed; }
td { width: 33%; }

La disposition de la table fixe est importante car sinon, le navigateur ajustera les largeurs à sa guise si le contenu ne s'adapte pas, c'est-à-dire que les largeurs sont une suggestion, pas une règle sans une disposition de table fixe.

Évidemment, adaptez le code CSS à votre situation, ce qui signifie généralement que vous n'appliquez le style qu'à des tables ayant une classe ou éventuellement un identifiant donné.

112
cletus

Utilisation de table-layout: fixed Comme propriété de table et de width: calc(100%/3); pour td ( en supposant qu'il y ait 3 td). Avec ces deux propriétés définies, les cellules du tableau auront une taille égale à .

Reportez-vous à la démo .

4
Shashank