Wie wird die Tabellenzelle entsprechend dem Inhalt verkleinert?

Question

Wie kann ich die Tabelle mit zwei Spalten machen (Zellen) wie folgt aussehen:

• Erste Zelle ist nach dem Inhalt
• Die andere Zelle den Rest der Tabelle passt (breiter als beide zusammen Inhalt schrumpfen)

Beispiel:

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

ich den Tisch müssen wie folgt aussehen:

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

Hinweis: Ich kenne die Breite von "foo" nicht, also kann ich nicht "50px", "10%" oder so etwas einstellen.

Answer 1

Sie können die width der zweiten Zelle auf 100%

HTML:

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

CSS:

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

prüfen this fiddle aus.

Answer 2

Wenn die Gesamtgröße der Tabelle 500 Pixel beträgt und nicht überschritten wird, geben Sie td{max-width: 500px;} ein; Wenn der Minimalwert 500 Pixel beträgt, td {min-width: 500px;}; Sieh dir das an.

Answer 3

gesetzt

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

wird es ur Problem zu lösen ..

Answer 4

Ich weiß, das vor Jahren gefragt wurde. Das OP hat es wahrscheinlich schon gelöst. Aber das könnte für jemanden immer noch hilfreich sein. Also poste ich, was für mich funktioniert hat. Folgendes habe ich mit meinem gemacht. Ich setze die Breite auf fast Null, verkleinere sie und setze dann den Leerraum auf neu. Gelöst.

td { 
width:0.1%; 
white-space: nowrap; 
}