web-dev-qa-db-fra.com

Faire une table de remplissage td

J'ai une table qui a une hauteur fixe de 50px et 100% largeur.

À l'intérieur de cette table, j'ai deux divs, sur la même ligne, comme ceci:

<table>
  <tr>
    <td>
      <div id="1"></div>
    </td>
    <td>
      <div id="2"></div>
    </td>
  </tr>
</table>

La première div a float:left, et la seconde a float:right.

Donc, la table est 100% de la page. Je veux que div2 envelopper son contenu, et div1 pour remplir l'espace restant de sorte que div2 soit aligné à droite comme ceci:

+--------------------------------------------------------------+
| [ DIV 1          (Expands)       ][ DIV 2 AND ITS CONTENTS ] |
+--------------------------------------------------------------+

et ce que je reçois actuellement lorsque div1 a moins de contenu qu'une ligne complète:

+--------------------------------------------------------------+
| [ DIV 1 ][ DIV 2 ]                                           |
+--------------------------------------------------------------+

Sans table, je peux le faire flotter à gauche et à droite directement, mais ensuite, quand ils se "réuniront", ils s'enrouleront l'un sous l'autre plutôt que l'un à côté de l'autre.

EDIT: J'ai ajouté un nouveau jsfiddle here . C’est l'exemple de travail . Essayez de supprimer tous les liens sauf un du div de gauche et de voir le résultat. La deuxième division devrait rester à l'extrême droite. J'espère que je me suis expliqué.

htmlcsshtml-table
14
Twinone

Résolu en ajoutant le width:100% à la table.

http://jsfiddle.net/HRT5E/1/

table {
    width:100%;
}
16
Twinone

Utilisez la propriété "colspan" de td. Ex:

    <td colspan=75%> info </td>
29
tymeJV

Premièrement, votre tableau ne semble pas être réglé sur toute la largeur de la page. Vous souhaitez ajouter un style de largeur ou un attribut de largeur au balisage.

Ensuite, définissez une largeur fixe à droite "div" (ou plus précisément <TD>) et le premier remplira l’espace restant.

Comme d'autres l'ont fait remarquer, la table d'emballage semble inutile.

0
JohnFx