CSS, um eine Tabellenspalte so viel Raum wie möglich zu nehmen, und andere Spalten so wenig

Question

Ich muss eine HTML-Datentabelle mit CSS Layout.

Der tatsächliche Inhalt der Tabelle kann abweichen, aber es gibt immer eine Hauptspalte und 2 oder mehr andere Spalten. Ich möchte, dass die Hauptspalte unabhängig vom Inhalt so viel wie möglich in Anspruch nimmt, während die anderen Spalten möglichst wenig Breite einnehmen. Ich kann keine genauen Breiten für irgendeine der Spalten spezifizieren, weil ihr Inhalt sich ändern kann.

Wie kann ich dies mit einer einfachen semantisch gültigen HTML-Tabelle und CSS nur tun?

Zum Beispiel:

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

Answer 1

ich weit bin von einem CSS-Experte zu sein, aber das funktioniert für mich (in IE, FF, Safari und Chrome):

td.zero_width { 
    width: 1%; 
} 

Dann in Ihrem HTML :

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

Answer 2

zu Alexk Lösung ähnlich, aber möglicherweise auf Ihrer Situation ein wenig einfacher zu implementieren abhängig:

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

.importantColumn{ 
    width: 100%; 
} 

Sie können auch die Zellen white-space:nowrap anwenden, wenn Sie das Umbrechen vermeiden möchten.

Answer 3

Ich hatte keinen Erfolg mit width: 100%;, wie es scheint, dass ohne ein Container-Div, das eine feste Breite hat, dies nicht die beabsichtigten Ergebnisse erhalten wird. Stattdessen verwende ich etwas wie das Folgende und es scheint mir meine besten Ergebnisse zu geben.

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

Auf diese Weise kann es größer, wenn es ihn braucht, und es scheint, dass der Browser alle den zusätzlichen Platz geben wird auf die jeweils Spalte auf diese Weise eingestellt wird. Nicht sicher, ob es für jeden funktioniert, aber für mich in Chrom (habe nicht versucht, andere) ... einen Versuch wert.