Rendre une colonne de tableau HTML aussi petite que possible mais pas plus petite

J'ai une colonne avec des étiquettes et des zones de texte correspondantes, à savoir:

<table>
  <tr>
  <td>Label:</td>
  <td><input type="text"></input></td>
  </tr>
  <tr>
  <td>longer label:</td>
  <td><input type="text"></input></td>
  etc...

Je veux m'assurer que la première colonne est assez large pour permettre le texte sur une seule ligne, mais pas plus large que nécessaire, pour permettre à un maximum d'espace pour les zones d'entrée (qui sont à la largeur de 100%). Donc je ne veux pas d'un pourcentage ou explicite largeur, juste quelque chose à dire "aussi petit que possible, mais pas plus petit."

Est-il un moyen de le faire en raw html/css ou dois-je avoir recours à javascript?

(Évidemment, si la page est très étroite, ce n'est pas réalisable, mais je ne suis pas inquiet au sujet de vraiment étroites navigateurs.)

source d'informationauteur Fred Thomas

  1. 1

    Assurez-vous que votre largeur du tableau à 100%. Une entrée avec 100% de largeur ne fera qu'élargir à 100% de son élément parent. Car un tableau n'est pas naturellement à 100% de large (aussi large que son contenu), vous pouvez vous retrouver avec curieusement de la taille des entrées.

    Personnellement, je viens de trouver sur une largeur qui fonctionne et de rester avec elle pour l'étiquette de cellules. Surtout si vous faites cela sur plusieurs pages pour que ça reste cohérent.

    Puisque vous êtes en train de faire quelque chose de très spécifique avec des éléments HTML courants, je vous suggère fortement de donner une classe CSS pour éviter de casser d'autres choses. Votre table et CSS pourrait ressembler à quelque chose comme ceci:

    <style type="text/css">
    table.form{width:100%}
    td.label{width:150px;white-space:nowrap;}
    td input{width:100%;}
</style>

<table class="form">
    <tr>
        <td class="label">My label:</td>
        <td><input type="text" /></td>
    </tr>
</table>

    L'inconvénient de cette est que le tableau de mise en page est vraiment un mauvais chemin à parcourir, mais le travail avec ce que tu sais le mieux et obtient le travail fait.