Spaltenbreite

[designfanatiker]

Ich versuche seit einigen Tagen vergeblich Tabellenspalten eine feste Breite in „em“ zuzuweisen, scheitere aber immer daran, dass bereits IE und FF die Breite unterschiedlich interpretieren. Obwohl sich der IE im standardkonformen Modus befindet zeigt er das als Boxmodel-Bug bekannte Verhalten. Kennt ihr eine Lösung für dieses Problem? Bin kurz davor ein Blindgif einzusetzen.

[Mich@el]

Hallo designfanatiker.
Wenn Du der ganzen Tabelle eine Höhe und eine bestimmte Breite zuweisen möchtest, mußt Du height und width beim Selektor table notieren.

table { width: 30em;
height: 10em;
}

Du kannst natürlich auch eine Höhe oder Breite nur für einzelne Zellen oder Zeilen bestimmen:

tr {height: 20px; }
td {width: 10px; }

Hilft Dir das weiter?

Grüße
Michael

[designfanatiker]

Meine Tabellen haben die Breite 100% (irgendwas um die 60em). Einigen mit einem Innenabstand von 0.2em versehenen Tabellenüberschriften (th) habe ich ebenfalls eine Breite zugewiesen. Diese wird im IE und FF unterschiedlich interpretiert. Im IE sind die Tabellenspalten deutlich schmaler als im FF.

[satre]

Hast du's mal mit colgroup versucht?

[designfanatiker]

Nein, ich möchte ja nicht mehrere, sondern nur genau eine Spalte formatieren.

[Mich@el]

Ich habe mir mal ein Beispiel gemacht. Die Tabelle sieht in jedem Browser gleich aus:

<style type="text/css">
/* <![CDATA[ */
body {
      font: 100.01% sans-serif;
      color: #706348;
      background-color: white;
}
table {
      border-collapse: collapse;  }
td, th {
      width: 80px;
      height: 50px;
      border: 1px solid #807459;
      text-align: center;
}
.spalte1 { background-color: #CCBA8F; }
.spalte2 { background-color: #E6DFCF; }
.spalte3 { background-color: white; }

/* ]]> */
</style>

<table>
<colgroup>
<col class="spalte1"  />
<col class="spalte2"  />
<col class="spalte3" />
</colgroup>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
<th>Spalte 3</th>
</tr>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
</table>

[designfanatiker]

Den Unterschied sieht man erst wenn man den Zellen einen Innenabstand zuweist.