html - tablas - ¿Cómo hacer que una celda de tabla disminuya el ancho para ajustarse solo a su contenido?

table html

Question

Quiero que la tabla tenga un ancho del 100%, pero solo una columna de ella debe tener un ancho libre, como:

| A | B | C                                                                  |

por lo tanto, el ancho de las columnas A y B debe coincidir con el ancho de su contenido, pero el ancho de C debe continuar hasta que la tabla termine.

Ok, podría especificar el ancho de A y B en píxeles, pero el problema es que el ancho del contenido de estas columnas no es fijo, por lo que si establezco un ancho fijo no coincidirá perfectamente con el contenido :(

PD: no estoy usando elementos de la tabla real, sino una lista de DL envuelta en un div. El div tiene display: table, dl has display: table-row, y dt / dd display: table-cell ...

Answer 1

Si te entendí, tienes datos tabulares, pero quieres presentarlos en el navegador usando elementos div (tablas AFAIK y divs con pantalla: la tabla se comporta de la misma manera).

(Aquí hay un jsfiddle que funciona: http://jsfiddle.net/roimergarcia/CWKRA/ )

El marcado:

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

Y el 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 */
}​

Lo triste es que no pude hacer esto hace un año, cuando realmente lo necesitaba -_-!