CSS pour faire une colonne de table prendre autant de place que possible, et d'autres cols aussi peu

Question

J'ai besoin de mettre en page un html datatable avec CSS.

Le contenu réel de la table peut différer, mais il y a toujours une colonne principale et 2 autres colonnes ou plus. Je voudrais que la colonne principale prenne autant de largeur que possible, quel que soit son contenu, alors que les autres colonnes prennent le moins de largeur possible. Je ne peux pas spécifier des largeurs exactes pour l'une des colonnes, car leur contenu peut changer.

Comment puis-je faire cela en utilisant une simple table html sémantiquement valide et css seulement?

Par exemple:

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

Answer 1

Je suis loin d'être un expert en CSS, mais cela fonctionne pour moi (dans IE, FF, Safari et Chrome):

td.zero_width { 
    width: 1%; 
} 

Puis dans votre code HTML :

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

Answer 2

similaires à la solution de AlexK, mais peut-être un peu plus facile à mettre en œuvre en fonction de votre situation:

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

.importantColumn{ 
    width: 100%; 
} 

Vous pouvez également appliquer white-space:nowrap aux cellules si vous souhaitez éviter l'enrubannage.

Answer 3

Je n'ai pas eu de succès avec width: 100%; car il semble que sans div conteneur qui a une largeur fixe, cela n'obtiendra pas les résultats escomptés. Au lieu de cela, j'utilise quelque chose comme ce qui suit et il semble me donner mes meilleurs résultats.

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

De cette façon, il peut devenir plus grand si elle a besoin, et il semble que le navigateur donnera tout l'espace supplémentaire à la colonne qui réglée de cette façon. Je ne sais pas si cela fonctionne pour tout le monde, mais a fait pour moi en chrome (n'ont pas essayé d'autres) ... vaut une photo.