web-dev-qa-db-fra.com

Comment faire rétrécir les cellules d'un tableau en fonction du contenu?

Comment puis-je faire en sorte que le tableau avec 2 colonnes (cellules) ressemble à ceci:

  • La première cellule est rétrécie en fonction du contenu
  • L'autre cellule s'adapte au reste du tableau (plus large que les deux contenus ensemble)

Exemple:

<table style="width: 500px;">
   <tr>
      <td>foo</td>
      <td>bar</td>
   </tr>
</table>

J'ai besoin que la table ressemble à ceci:

.___________________________________________________________________________.
| foo | bar            <a lot of space here>                                |
|_____|_____________________________________________________________________|
                           500 px total width

Remarque: je ne connais pas la largeur de "foo" donc je ne peux pas définir "50px", "10%" ou quelque chose comme ça.

htmlcsshtml-tablewidth
42
Pavel S.

Vous pouvez définir le width de la deuxième cellule sur 100%

HTML:

<table>
   <tr>
      <td>foo</td>
      <td class="grow">bar</td>
   </tr>
</table>​

CSS:

table { width: 500px; }
.grow { width: 100%; }​

Vérifiez ce violon out.

43
scumah

Je sais que cela a été demandé il y a des années. L'OP l'a probablement résolu maintenant. Mais cela pourrait encore être utile à quelqu'un. Je poste donc ce qui a fonctionné pour moi. Voici ce que j'ai fait avec le mien. J'ai défini la largeur à quelque chose près de zéro, pour la réduire, puis j'ai défini l'espace blanc sur nowrap. Résolu.

td {
width:0.1%;
white-space: nowrap;
}
32
Nat Julian Belza

Réglez ceci:

td {
    max-width:100%;
    white-space:nowrap;
}

Cela résoudra votre problème.

4
Shubham Nigam

Si la taille totale du tableau est de 500 pixels et ne passera pas, mettez td{max-width: 500px;}; Si la valeur minimale est de 500 pixels, td {min-width: 500px;}; Regardez ceci exemple .

2
Filipe Manuel