CSS para hacer que una columna de la tabla ocupe tanto espacio como sea posible, y otras columnas tan pequeñas

Question

Necesito diseñar una tabla de datos html con CSS.

El contenido real de la tabla puede diferir, pero siempre hay una columna principal y 2 o más columnas. Me gustaría hacer que la columna principal ocupe MUCHO ancho como sea posible, independientemente de su contenido, mientras que las otras columnas ocupan el menor ancho posible. No puedo especificar los anchos exactos para ninguna de las columnas porque su contenido puede cambiar.

¿Cómo puedo hacer esto usando una simple tabla html semánticamente válida y solo CSS?

Por ejemplo:

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

Answer 1

estoy lejos de ser un experto en CSS, pero esto funciona para mí (en IE, FF, Safari y Chrome):

td.zero_width { 
    width: 1%; 
} 

Luego, en el código HTML :

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

Answer 2

al igual que en la solución de Alexk, pero posiblemente un poco más fácil de implementar en función de su situación:

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

.importantColumn{ 
    width: 100%; 
} 

Es posible que desee aplicar white-space:nowrap a las celdas si desea evitar la envoltura.

Answer 3

No he tenido éxito con width: 100%; ya que parece que sin un contenedor div que tenga un ancho fijo no obtendrá los resultados deseados. En cambio, uso algo como lo siguiente y parece darme los mejores resultados.

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

De esta manera se puede conseguir mayor si se necesita, y parece que el navegador le dará todo el espacio extra a la columna que se establece de esta manera. No estoy seguro si funciona para todos pero lo hizo para mí en cromo (no he probado otros) ... vale la pena intentarlo.