nicht angemeldet
Tabellen-Layout
Hallo Forum,
ich glaub, die Frage ist ziemlich simpel, aber bitte nicht auslachen:
Also ich hab eine Tabelle, in deren Zellen weitere Tabellen definiert sind.
Alle dieser Tabellen in der Zelle solen gleich hoch sein. Aber nicht in einer bestimmten Höhe, sondern so hoch, wie die mit dem meisten Inhalt.
Klingt das zu verwirrend?
Hier der Quelltext zur Illustration:
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
Eintrag<br />
noch ein Eintrag<br />
ein dritter Eintrag<br />
letzter Eintrag
</td>
</tr>
</table>
</td>
<td valign="top">
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>
Eintrag<br />
noch ein Eintrag<br />
ein dritter Eintrag<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
Die Tabelle in der zweiten Zelle soll also so hoch werden wie die in der ersten Zelle, die mehr Inhalt hat.
Geklappt haben weder height="100%" noch style="height:100%";
Hat jemand einen Tipp für mich?
Danke und viele Grüße,
Steffi.
-
Hi Steffi,
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top">Warum fügst Du hier nochmal eine Tabelle ein anstatt die Tabellenzellen mit width und hight zu formatieren?
Viele Grüße
Mathias Bigge-
Hallo Steffi!
Warum fügst Du hier nochmal eine Tabelle ein anstatt die Tabellenzellen mit width und hight zu formatieren?
Kann ich Mathias nur zustimmen. Nimm keine Tabelle, wenn es nicht unbedingt sein muss, sondern einen <div>-Tag. Die Grenzen kannst du dann mit style="border:1px solid #000000;" definieren. Setze einfach für jede Zeile weniger ein oder lass die Tabelle in der zweiten Spalte kleiner und richte sie mit style="vertical-align:top;" am oberen Rand der Tabellenzelle aus.
Willst du wirklich mit height arbeiten, musst du zuvor definieren, wie hoch 100% sein sollen, sonst interpretiert der Browser 100% des <body>. So funktioniert es (zumindest in Mozilla, wo ich es getestet habe):<table style="border:2px dashed #FF0000;">
<tr>
<td style="height:200px;">
<div style="border:1px solid #000000;height:100%;">
Eintrag<br>
Eintrag<br>
Eintrag<br>
Eintrag
</div>
</td>
<td style="height:200px;">
<div style="border:1px solid #000000;height:100%;">
Eintrag<br>
Eintrag<br>
Eintrag
</div>
</td>
</tr>
</table>Liebe Grüße
n i c o
-
Hallo,
Kann ich Mathias nur zustimmen. Nimm keine Tabelle, wenn es nicht unbedingt sein muss, sondern einen <div>-Tag.
Nimm kein <div/>, wenn es nicht unbedingt sein muß.
Natürlich ist eine weitere Tabelle hier pervers. Aber auch nicht mehr, als es ein Tabellenlayout insgesamt ist.
Gruß,
Shaddai-
Ciao!
Zugegeben ist es vorzuziehen, von Tabellenlayouts Abstand zu nehmen. Doch bieten sie immer noch die einzige Möglichkeit, den Browsern, die in CSS nicht sonderlich firm sind, eine annehmbare Seitenstruktur anzubieten (z.B. NN 4). Wenn man dann auch noch berücksichtigt, dass MSIE und Opera 6- gräulich-lustige Effekte bei float machen...Grüße
n i c o
-
-
-
-
Hallo Steffi,
Das ist die einfachste Lösung:
<table cellpadding="0" cellspacing="0" border="1">
<tr>
<td valign="top" height="100%">
<table border="1" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td valign="top">
Eintrag<br />
noch ein Eintrag<br />
ein dritter Eintrag<br />
letzter Eintrag
</td>
</tr>
</table>
</td>
<td valign="top" height="100%">
<table border="1" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td valign="top">
Eintrag<br />
noch ein Eintrag<br />
ein dritter Eintrag<br />
</td>
</tr>
</table>
</td>
</tr>
</table>viele Grüße
Atomfried -
Hallöchen!
Sorry, dass ich erst jetzt wieder dabei bin. Vielen Dank zunächst für die Meinungen. Vielleicht als Argumentationshilfe für Tabellen:Die Inhalte der einzelnen Zellen werden aus einer DB geladen. Es kann also durchaus mal sein, dass vier, Sieben oder gar kein Eintrag in einer Zelle stehen. Die ganze Zeile soll dann immer so hoch sein wie die höchste Zelle. Die Inhalte bekommen schöne Ränder verpasst und sollen zum Rand 1px Abstand haben.
Deshalb kann ich keine 100% Höhe vorgeben. Mit einem div in der Zelle hatte ich es zuerst probiert. Das hat nicht geklappt. Deshalb bin ich auf die, zugegeben wirklich perverse Idee gekommen, in der Zelle eine weitere Tabelle zu platzieren. Hat ja dann auch nicht hingehauen.Der TIPP Atomfried funzt nur im Fire...Mozilla..Epiphany Universum. Opera und vor allem der IE interpretieren die 100% der Überzelle nicht als Vorgabe.
Ich werde wohl eine feste Höhe angeben müssen, was ich eigentlich vermeiden wollte. Es sei denn, jemand zaubert noch einen Trick aus dem Ärmel?
Viele Grüße,
Steffi.