I CSS per fare in modo che una colonna di tabella occupi più spazio possibile e altri caratteri meno

Question

Devo impaginare un html datatable con CSS.

Il contenuto effettivo della tabella può variare, ma c'è sempre una colonna principale e 2 o più altre colonne. Vorrei fare in modo che la colonna principale occupasse la larghezza MOLTO possibile, indipendentemente dal suo contenuto, mentre le altre colonne occupano la larghezza minore possibile. Non posso specificare larghezze esatte per nessuna delle colonne perché il loro contenuto può cambiare.

Come posso farlo usando una semplice tabella html semanticamente valida e solo CSS?

Ad esempio:

| Main column                           | Col 2 | Column 3 |
 <------------------ fixed width in px ------------------->
 <------- as wide as possible --------->
 Thin as possible depending on contents: <-----> <--------> 

Answer 1

Sono ben lungi dall'essere un esperto CSS ma questo funziona per me (in IE, FF, Safari e Chrome):

td.zero_width {
    width: 1%;
}

Quindi nel tuo HTML:

<td class="zero_width">...</td>

Answer 2

Simile alla soluzione di Alexk, ma forse un po 'più facile da implementare a seconda della situazione:

<table>
    <tr>
        <td>foo</td>
        <td class="importantColumn">bar</td>
        <td>woo</td>
        <td>pah</td>
    </tr>
</table>

.importantColumn{
    width: 100%;
}

Potresti anche voler applicare white-space: nowrap alle celle se vuoi evitare il wrapping.

Answer 3

Non ho avuto successo con larghezza: 100%; in quanto sembra che senza un div contenitore con una larghezza fissa questo non otterrà i risultati previsti. Invece uso qualcosa di simile al seguente e sembra darmi i miei migliori risultati.

.column-fill { min-width: 325px; }

In questo modo può diventare più grande se necessario, e sembra che il browser darà tutto lo spazio extra a qualsiasi colonna impostata in questo modo. Non sono sicuro che funzioni per tutti, ma lo ha fatto per me in Chrome (non ne ho provati altri) ... vale la pena provare.