Des cellules de table de taille égale pour remplir toute la largeur de la table

Question

Hé les gars, je suppose que le titre explique en quelque sorte ce que j'essaie de réaliser;

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 se trouve? Les cellules doivent avoir la même largeur et la taille de la table externe est également dynamique.

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

Merci!

Answer 1

Juste pour les autres qui viennent voir ce post ces jours-ci: vous n'avez même pas besoin de définir une largeur spécifique, table-layout: fixed suffit. Voir ce jsfiddle , testé sur IE8.

Notez que pour que la disposition de la table fonctionne, l'élément stylé doit avoir une largeur (100% dans mon exemple).

Answer 2

Utilisez simplement le pourcentage de la largeur et de la table fixe de mise en page:

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

avec

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

Table fixe à disposition est importante car sinon, le navigateur va ajuster les largeurs comme il l'entend, si le contenu ne correspondent pas c'est à dire les largeurs sont par ailleurs une suggestion et non une règle sans fixe de la table.

Évidemment, ajuster le CSS pour l'adapter à votre situation, ce qui signifie habituellement appliquer le style qu'à une des tables avec une classe donnée ou peut-être avec un IDENTIFIANT donné.

Answer 3

Assurez-vous que les pourcentages totalisent 100%: D