2 nebeneinander liegende Tabellen auf gleiche Höhe

Computer: Software & Programmierung HTML & CSS
#1

Es geht um die folgenden beiden Tabellen.

Tabelle 1

Inhalt 1

Inhalt 2

 

Tabelle 2

Inhalt 1

Inhalt 2

Problem: Bei unterschiedlichen Zeilen sind die Tabellen unterschiedlich hoch (z.B. wenn Tabelle 1 hundert Zeilen im Inhalt hat und Tabelle 2 nur eine einzige Zeile. Beide Tabellen sollen aber immer gleich hoch sein, egal welche von beiden mehr Zeilen hat.

Bedingungen:

  • Die gelben Zellen, die die Überschriften beinhalten, sollen die aktuelle Größe behalten (und nicht höher werden)
  • Die Zellen, in denen der Inhalt steht sollen immer beide gleich hoch sein, egal welche der beiden Zellen im Einzelfall länger ist
  • Die Höhenangabe darf nicht in Pixel erfolgen (da die Tabellen für mehrere unterschiedliche Fälle verwendet werden)
  • bitte nur mit HTML lösen (also kein Java usw.)

Ich wäre um Hilfe sehr dankbar!

#2

Hallo.

height="100%"\>


ergänze height="100%".

Gruss Sebastian
#3

klappt nicht

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#4

Hallo.

klappt nicht

Also ich habs jetzt im Firefox 3.0 und Internet Explorer 7.0
und Internet Explorer 6.0 getestet, vorher nur im Firefox 3.0.

Hier mal meine modifizierte Variante im ganzen.
Vielleicht hast du etwas verwechselt.

Tabelle 1

Inhalt 1

Inhalt 2

Inhalt 1

Inhalt 2

Tabelle 2

Inhalt 1

Inhalt 2

Gruss Sebastian

#5

Nein sorry, hab mich wohl falsch ausgedrückt.

Das ist das Problem:

Tabelle 1
Zelle 1  
 
Soll im
umgekehrten Fall (wenn Zelle 2 höher als Zelle 1 ist) automatisch genauso hoch
wie Zelle 2 werden.
 
 

Tabelle 2
Zelle 2 Soll
automatisch genauso hoch werden wie Zelle 1

#6

Nein sorry, hab mich wohl falsch ausgedrückt.

Hallo Marcel.

so, ich habe gestern versucht dein Problem zu lösen, jedoch ohne Erfolg und zwar, denke ich aktuell ist das ohne JavaScript garnicht möglich, vielleicht kann dir aber sonst einer hier den möglichen Lösungsweg präsentieren.

Ansonsten verwenden und CSS. Mit CSS ist es bestimmt möglich.

Gruss Sebastian

#7

Hai, Marcel,

das geht so nicht…

Nimm eine Tabelle und setze die Spalten optisch voneinander ab, dann passen die Zeilenhöhen…

Gruß
Sibylle

#8

Hallo Marcel,

Problem: Bei unterschiedlichen Zeilen sind die Tabellen
unterschiedlich hoch (z.B. wenn Tabelle 1 hundert Zeilen im
Inhalt hat und Tabelle 2 nur eine einzige Zeile. Beide
Tabellen sollen aber immer gleich hoch sein, egal welche von
beiden mehr Zeilen hat.

Der Trick besteht darin, dass du deinen ineinander verschachtelten Tabellen und deinen hellgelb gefärbten inneren Inhalts-TD-Elementen jeweils über CSS 100% Höhe geben musst.

table { width:100%; height:100%; }
td td.content { background-color:#FFFFCC;height:100%; }

Mit Rücksicht auf Opera und IE muss sich das Dokument im Quirksmodus befinden (also z.B. keinen DOCTYPE angeben, was man aber eher vermeiden sollte, wenn man sich dafür bei anderen als Tabellen-Elementen keine CSS-Darstellungsunterschiede zwischen den einzelnen Browsern einhandeln will).

Gruß Gernot