HTML Nested Tables mit Colspan

gugus999 · 8. April 2011

Ich habe vor kurzem festgestellt, dass innere Tabellen nicht unabhängig von colspans der äusseren Tabellen sind. Dies habe ich spontan für einen Bug gehalten, da es aber alle modernen Browser in etwa gleich machen, zweifle ich an meiner Bug-These.

Also, ich habe das Problem, dass ich in einer Tabelle mit col- und rowspan in einer Zelle eine weitere Tabelle habe, die selbst zwei Spalten hat. Diese innere Tabelle scheint gar nicht unabhängig von der äusseren Tabelle zu sein, was mich gar nicht freut. Gibt es eine Möglichkeit (ev. ein CSS-Befehl), die innere Tabelle etwas unabhängiger zu machen?

Möglichst einfaches Beispiel:

Code:

<html>
  <head>
    <style>
      table, tr, td {
        border: 1px solid black;
       }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2" width="25%">Tabelle</td>
        <td colspan="3" width="75%">Some Information</td>
      </tr>
      <tr>
        <td colspan="2"  width="50%">Ein paar Infos</td>
        <td width="25%">Kleines Detail</td>
      </tr>
      <tr>
        <td colspan="2" width="50%">
	<table>
	  <tr>
	    <td>Aha:</td>
	    <td>A Value</td>
	  </tr>
	  <tr>
	    <td>Bse:</td>
	    <td>A Value</td>
	  </tr>
	</table>
        </td>
        <td colspan="2" width="50%">Ein Textfeld</td>
      </tr>
      <tr>
        <td colspan="4" width="100%">History</td>
      </tr>
    </table>
  </body>
</html>

Folgendes Verhalten finde ich komisch:

Die innere Tabelle (innerhalb einer Zelle mit colspan=2) ist bündig mit der oberen Zelle (colspan=1)
Verlängern der Werte der inneren Tabelle verlängern auch die Zelle mit dem Rowspan (was ja eigentlich eine Colspan von 1 hat)

Gibt es da Abhilfe? Für den ersten Punkt habe ich soweit etwas gefunden: Die breite der inneren Tabelle auf 100% setzen. Für den zweiten Punkt habe ich jedoch bisher keine Lösung gefunden.

Neutrohm · 8. April 2011

Das liegt alles an deiner "dämlichen" Festlegung der Breite über relative Größen.

Zu 1: Auch ohne die 100% ist die Tabelle nicht bündig! Sieht vielleicht bei dir so aus. Ist aber Zufall.

Zu 2: Wenn die linke Zelle wegen dem Text breiter werden muss und 50% breit ist muss die rechte Zelle logischerweise auch breiter werden, weil diese ebenfalls 50% breit ist.
Verstehe ansonsten nicht genau worüber du dich wunderst.

Verwende absolute Größen (zb width="150px" ) dann hast du damit keine Probleme und bekommst auch Zeilenumbrüche.

gugus999 · 12. April 2011

Ob % oder px spielt bei meinem Problem leider keine Rolle.

Ich habe den Beispielcode nun etwas angepasst, um das Problem noch etwas besser zu schildern (s.u.). Dazu habe ich nun den einten Zellenwert "etwas" verlängert. Dieser hat nun Einfluss auf die länge der Zelle oben links ("Tabelle"), obwohl mit einer festen Breite definiert. Ich verstehe nicht, wieso sich die obere Zelle verbreitert, da diese ja colspan=1 hat und die untere Zelle, in der die innere Tabelle steckt colspan=2 hat.

Code:

<html>
  <head>
    <style>
      table, tr, td {
        border: 1px solid black;
       }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td rowspan="2" width="250px">Tabelle</td>
        <td colspan="3" width="750px">Some Information</td>
      </tr>
      <tr>
        <td colspan="2"  width="500px">Ein paar Infos</td>
        <td width="250px">Kleines Detail</td>
      </tr>
      <tr>
        <td colspan="2" width="500px">
	<table width="100%">
	  <tr>
	    <td>Aha:</td>
	    <td>A Valueeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
	  </tr>
	  <tr>
	    <td>Bse:</td>
	    <td>A Value</td>
	  </tr>
	</table>
        </td>
        <td colspan="2" width="500px">Ein Textfeld</td>
      </tr>
      <tr>
        <td colspan="4" width="1000px">History</td>
      </tr>
    </table>
  </body>
</html>

Ergänzung:
Wenn man die Zellen

Code:

        <td colspan="2"  width="500px">Ein paar Infos</td>
        <td width="250px">Kleines Detail</td>

tauscht, also

Code:

        <td width="250px">Kleines Detail</td>
        <td colspan="2"  width="500px">Ein paar Infos</td>

löst sich das Problem.

Suche

HTML Nested Tables mit Colspan

gugus999

Ensign

Neutrohm

Cadet 4th Year

gugus999

Ensign

Ähnliche Themen