web-dev-qa-db-fra.com

Comment puis-je faire en sorte qu'une colonne du tableau remplisse tout l'espace horizontal disponible?

J'ai un tableau HTML composé de 3 colonnes. Il a une largeur fixe de 600px.

<table>
  <tr>
    <td>Name</td>
    <td>Qty</td>
    <td>Actions</td>
  </tr>
</table>

Je veux que les colonnes Qté et Actions soient aussi petites que possible (en gardant le contenu sur une seule ligne) et que la colonne Nom occupe le reste de l'espace disponible. La taille de la colonne Qté et Actions change en fonction du contenu/de la taille de la police, donc les largeurs fixes ne fonctionneront pas dans ce cas.

Existe-t-il un moyen de le faire en HTML/CSS? Ou est-ce quelque chose dont j'ai besoin pour sortir le Javascript?

htmlcsshtml-table
32
gsteinert

Vous pouvez appliquer width = "99%" sur cette colonne. Par exemple:

<table> 
  <tr> 
    <td width="99%">Name</td> 
    <td>Qty</td> 
    <td>Actions</td> 
  </tr> 
</table>
39
Ranta

vous pouvez utiliser la largeur max: 99%; sur la première colonne et donner des tailles fixes sur les autres colonnes (j'ai utilisé des colonnes de taille pixels).

<table style="width: 100%;">
  <tr>
    <td style="max-width: 99%">
      Will max
    </td>
    <td style='width:110px;'> 
      fixed size here
    </td>
  </tr>
</table>
3
Loic Lacomme