Come ridurre la larghezza della cella di una tabella per adattarla solo al suo contenuto?

Question

Voglio il tavolo per avere larghezza 100%, ma solo una colonna da essa dovrebbe avere una larghezza libera, come:

| A | B | C                 | 

così la larghezza delle colonne A e B deve corrispondere alla larghezza del loro contenuto, ma la larghezza di C dovrebbe andare avanti fino alla fine del tavolo.

Ok, potrei specificare la larghezza di A e B in pixel, ma il problema è che la larghezza del contenuto di queste colonne non è fissa, quindi se impostassi una larghezza fissa non corrisponderebbe perfettamente al contenuto :(

PS: Non sto utilizzando voci di tabella effettive, ma un elenco DL racchiuso in un div. Il div ha display: tabella, dl ha display: table-row e dt/dd display: table-cell ...

Answer 1

Se ho capito, si dispone di dati tabulari, ma si desidera presentare nel browser utilizzando div elementi (tabelle AFAIK e div con display: table si comporta in gran parte la stessa)

.

(ecco un jsfiddle di lavoro: http://jsfiddle.net/roimergarcia/CWKRA/)

Il 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>​ 

E il 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 */ 
}​ 

La parte triste è non ho potuto fare questo uno anno fa, quando ne avevo davvero bisogno -_-!