✔ Tabellen: Fixe und prozentuale Spalten mischen

[mihawk]

Hallo Zusammen!

Ich habe folgendes Problem: Ich habe eine Tabelle mit mehreren Zeilen, die jeweils eine Spalte haben und dazwischen eine Zeile mit drei Spalten (Beispiel unten). Dabei soll die Tabelle in der Breite 100% des Fensters ausfüllen, und in besagter Zeile sollen jeweils Spalte 1 und 3 eine fixe Spaltenbreite haben und die 2te den Rest einnehmen.
Leider klappt das nicht so wie ich es mir wünsche, Ergebnis sieht in jedem Browser anders aus... weiß jemand, wie ich die styles richtig definieren muss?

<table>
  <tr><td colspan="3" style="width:100%;">Erste Zeile</td></tr>
  <tr><td colspan="3" style="width:100%;">Zweite Zeile</td></tr>
  <tr><td rowspan="2" style="width:150px;">Dritte Zeile, Spalte 1</td>
       <td style="width;;">Spalte 2, soll den restlichen Platz einnehmen</td>
       <td style="width:150px;">Spalte 3</td>
  </tr>
  <tr><td style="width;;">Spalte 2, soll den restlichen Platz einnehmen</td>
       <td style="width:150px;">Spalte 3</td>
  </tr>
  <tr><td colspan="3" style="width:100%;">"Vierte" Zeile</td></tr>
  <tr><td colspan="3" style="width:100%;">"Fünfte" Zeile</td></tr>
</table>

Vielen Dank für eure Hilfe!

 

[Maik]

Hi,

richte zu Beginn der Tabelle mit Hilfe des colgroup-Elements die einzelnen Spalten ein, wobei für die beiden äußeren der gewünschte fixe Wert festgelegt wird, und die mittlere keinerlei Breitenangabe erhält, so verhält sich diese in dem Tabellengerüst auch relativ.

In den Zellen, wo das colspan-Attribut zum Einsatz kommt, wird keine 100%-Breite zusätzlich angegeben, da sich deren Breite durch das Überspannen der einzelnen Spalten innerhalb den Grenzen der Tabelle von selbst ergibt, und dies ansonsten zu Komplikationen mit den gewünschten fixen Spaltenbreiten führt, da sie dadurch im überwiegenden Teil der Browser breiter als gewünscht dargestellt werden.

Den Tabellenrahmen hab ich hier nur zur visuellen Unterstützung / Kontrolle aktiviert

<table cellpadding="0" cellspacing="0" border="1" width="100%">
   <colgroup>
      <col width="150">
      <col>
      <col width="150">
   </colgroup>
   <tr>
       <td colspan="3">Erste Zeile</td>
   </tr>
   <tr>
       <td colspan="3">Zweite Zeile</td>
   </tr>
   <tr>
       <td rowspan="2" style="width:150px;">Dritte Zeile, Spalte 1</td>
       <td>Spalte 2, soll den restlichen Platz einnehmen</td>
       <td style="width:150px;">Spalte 3</td>
   </tr>
   <tr>
       <td>Spalte 2, soll den restlichen Platz einnehmen</td>
       <td style="width:150px;">Spalte 3</td>
   </tr>
   <tr>
       <td colspan="3">"Vierte" Zeile</td>
   </tr>
   <tr>
       <td colspan="3">"Fünfte" Zeile</td>
   </tr>
</table>

mfg Maik

 

[mihawk]

Danke, scheint zu funktionieren.. Ich bau es mal in mein Projekt ein und teste noch einmal in allen Browsern.