Wie kann die Schrumpfbreite einer Tabellenzelle so angepasst werden, dass sie nur ihrem Inhalt entspricht?

Question

Ich möchte die Tabelle 100% Breite haben, aber nur eine Spalte aus sollte eine freie Breite haben, wie:

| A | B | C                 | 

so die Breite von A- und B-Säulen sollte die Breite ihres Inhalts übereinstimmen, aber Die Breite von C sollte weitergehen, bis der Tisch endet.

Ok Ich könnte die Breite von A und B in Pixeln angeben, aber das Problem ist, dass die Breite des Inhalts dieser Spalten nicht festgelegt ist. Wenn ich also eine feste Breite festlege, würde sie nicht perfekt mit dem Inhalt übereinstimmen :(

PS: Ich verwende keine tatsächlichen Tabellenelemente, sondern eine DL-Liste in einem div. Das div hat display: Tabelle, dl hat display: Tabellenzeile und dt/dd display: Tabellenzelle ...

Answer 1

Wenn ich Sie verstanden, haben Sie tabellarische Daten, aber Sie wollen es im Browser div Elementen präsentieren (AFAIK Tabellen und divs mit display: table verhält sich meist das gleiche)

.

(hier ist ein Arbeits jsfiddle: http://jsfiddle.net/roimergarcia/CWKRA/)

Das Markup:

<div class='theTable'> 
    <div class='theRow'> 
     <div class='theCell' >first</div> 
     <div class='theCell' >test</div> 
     <div class='theCell bigCell'>this is long</div> 
    </div> 
    <div class='theRow'> 
     <div class='theCell'>2nd</div> 
     <div class='theCell'>more test</div> 
     <div class='theCell'>it is still long</div> 
    </div> 
</div>​ 

Und die CSS:

.theTable{ 
    display:table; 
    width:95%; /* or whatever width for your table*/ 
} 
.theRow{display:table-row} 
.theCell{ 
    display:table-cell; 
    padding: 0px 2px; /* just some padding, if needed*/ 
    white-space: pre; /* this will avoid line breaks*/ 
} 
.bigCell{ 
    width:100%; /* this will shrink other cells */ 
}​ 

Der traurige Teil ist, konnte ich dieses Jahr nicht mehr tun vor, als ich es wirklich brauchte -_-!