CSS pour faire une colonne de table prennent autant de place que possible, et les autres cols aussi peu

Question

Je dois mettre en page un fichier HTML datatable avec CSS.

Le contenu réel de la table peut différer, mais il y a toujours une colonne principale et deux ou plusieurs autres colonnes. J'aimerais que la colonne principale occupe la plus grande largeur possible, quel que soit son contenu, tandis que les autres colonnes occupent la moins grande largeur possible. Je ne peux pas spécifier de largeurs exactes pour les colonnes car leur contenu peut changer.

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

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 HTML:

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

Answer 2

Semblable à la solution d'Alexk, mais peut-être un peu plus facile à implémenter 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 espace-blanc: nowrap aux cellules si vous souhaitez éviter le wrapping.

Answer 3

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

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

De cette façon, il peut s’agrandir si nécessaire, et il semble que le navigateur accorde tout l’espace supplémentaire à la colonne définie de cette façon. Je ne suis pas sûr que cela fonctionne pour tout le monde mais que ce soit pour moi en chrome (n'en ai pas essayé d'autres) ... ça vaut le coup.