CSS para fazer uma coluna de tabela ocupar tanto espaço quanto possível, e outros cols tão pouco

Question

Eu preciso o layout de um html tabela de dados com CSS.

O conteúdo real da tabela podem diferir, mas há sempre uma coluna principal e 2 ou mais colunas. Eu gostaria de fazer a coluna principal assumir como largura tanto quanto possível, independentemente do seu conteúdo, enquanto as outras colunas ocupam tão pouco largura possível. Eu não posso especificar larguras exatas para qualquer uma das colunas porque seu conteúdo pode mudar.

Como posso fazer isso usando um simples semanticamente válido tabela de HTML e CSS única?

Por exemplo:

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

Answer 1

Eu estou longe de ser um especialista em CSS, mas isso funciona para mim (no IE, FF, Safari e Chrome):

td.zero_width {
    width: 1%;
}

Então em seu HTML:

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

Answer 2

Semelhante a solução da Alexk, mas possivelmente um pouco mais fácil de implementar, dependendo da sua situação:

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

.importantColumn{
    width: 100%;
}

Você também pode querer aplicar white-space:nowrap para as células se você quer evitar de embrulho.

Answer 3

Eu não tive sucesso com width: 100%; como parece que, sem um div recipiente que tem uma largura fixa isso não vai obter os resultados pretendidos. Em vez disso eu usar algo como o seguinte e parece-me dar os meus melhores resultados.

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

Desta forma, ele pode ficar maior se ele precisa, e parece que o navegador irá dar todo o espaço extra para qualquer coluna é definida desta forma. Não tenho certeza se ele funciona para todos, mas fez por mim em cromo (não tentei outros) ... vale um tiro.