Comment faire rétrécir la cellule de table en fonction du contenu?

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

  • la première cellule est rétrécie en fonction du contenu
  • L'autre cellule correspond au reste de la table (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

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

34
demandé sur Brian Tompsett - 汤莱恩 2012-07-10 16:30:36

4 réponses

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

HTML: 

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

CSS: 

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

Vérifier ce violon out.

39
répondu scumah 2012-07-10 13:12:21

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. Donc je poste ce qui a fonctionné pour moi. Voici ce que j'ai fait avec le mien. Je mets la largeur à n'importe quoi près de zéro, pour le réduire, puis définissez l'espace blanc sur nowrap. Résoudre.

td {
width:0.1%;
white-space: nowrap;
}
18
répondu Nat Julian Belza 2017-04-25 15:34:24

Ensemble 

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

Il va résoudre ur problème ..

4
répondu Shubham Nigam 2015-02-25 10:49:08

Si la taille totale de la table 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
répondu Filipe Manuel 2012-07-10 12:51:03