CSS machen eine Tabellenspalte so viel Platz wie möglich einnehmen und andere cols so wenig

Question

Ich brauche eine HTML-Datentabelle mit CSS-Layout.

Der eigentliche Inhalt der Tabelle kann sich unterscheiden, aber es gibt immer eine Hauptsäule und zwei oder mehreren anderen Spalten. Ich mag die Hauptspalt so viel Breite wie möglich aufnehmen machen, unabhängig von seinem Inhalt, während die anderen Spalten so wenig Breite wie möglich in Anspruch nehmen. Ich kann nicht genau Breiten für eine der Spalten angeben, da dessen Inhalt ändern.

Wie kann ich dies nur eine einfache semantisch gültige HTML-Tabelle und mit CSS?

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 bin weit davon entfernt ein 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

ähnlich wie Alexk-Lösung, aber vielleicht ein wenig einfacher zu implementieren je nach Ihrer Situation:

<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 white-space:nowrap an die Zellen anwenden möchten, wenn Sie Verpackung vermeiden wollen.

Answer 3

Ich habe nicht Erfolg mit width: 100%; habe, wie es, dass ohne einen Container div scheint, die eine feste Breite hat, wird dies nicht die gewünschten Ergebnisse erhalten. Stattdessen verwende ich so etwas wie die folgenden, 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 alle funktioniert, aber für mich getan hat in Chrom (nicht andere versuchten) ... einen Versuch wert.