Cellules de tableau de taille égale pour remplir toute la largeur du tableau contenant

Existe-t-il un moyen d'utiliser HTML / CSS (avec un dimensionnement relatif) 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 des largeurs égales et la taille du tableau externe est également dynamique avec <table width="100%">.

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

Vous n'avez même pas besoin de définir une largeur spécifique pour les cellules, il table-layout: fixedsuffit de répartir les cellules uniformément.

ul {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
}
li {
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;
}

<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

Notez que pour table-layoutfonctionner, l'élément de style tableau doit avoir une largeur définie (100% dans mon exemple).

Utilisez simplement des largeurs de pourcentage et une disposition de table fixe :

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

avec

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

La mise en page fixe du tableau est importante car sinon le navigateur ajustera les largeurs comme bon lui semble si le contenu ne correspond pas, c'est-à-dire que les largeurs sont sinon une suggestion et non une règle sans mise en page fixe du tableau.

Évidemment, ajustez le CSS en fonction de vos circonstances, ce qui signifie généralement appliquer le style uniquement à une table avec une classe donnée ou éventuellement avec un ID donné.

En utilisant table-layout: fixedcomme une propriété pour tableet width: calc(100%/3);pour td( en supposant qu'il ya 3 td« s ). Avec ces deux propriétés définies, les cellules du tableau auront la même taille.

Reportez-vous à la démo .