Eine Tabellenzelle oben und unten ausfüllen
Doc_McSky
- css
0 LX0 Doc_McSky0 Deus Figendi0 Doc_McSky0 Vinzenz Mai0 apsel0 Deus Figendi
Hallo liebe Leute,
ich habe ein Formatierungsproblem in einer Tabelle.
Grundsätzlich ist es eine zweispaltige Tabelle mit x Zeilen.
In einer der Spalten will ich nun, das Text (ggf. wieder in einer eigenen Tabelle) einam OBEN an der Zellendecke steht, bzw. anderer Text (ggf. auch in einer Tabelle) UNTEN in dieser Zelle steht und der Platz dazwischen halt leer ist.
Große Frage nun eben:
Wie hefte ich irgendeinen Block oben an eine Tabellenzelle bzw. in der gleichen Zelle einen anderen Block unten an?
Vielen Dank für eine schnelle Hilfe vorab.
Gruß
Doc
An dieser Stelle kannst Du entweder Tabellen schachteln (sehr unschön) oder die rowspan-Eigenschaft bei den anderen Zellen der gleichen Zeile nutzen.
Gruß, LX
An dieser Stelle kannst Du entweder Tabellen schachteln (sehr unschön) oder die rowspan-Eigenschaft bei den anderen Zellen der gleichen Zeile nutzen.
Nein, einen Rowspan kommt nicht in Frage, es muss schon innerhalb der einen Zelle der Haupttabelle erfolgen.
Kann man da nicht wie float:left oder float:right etwas mit top und bottom machen?
Kann man da nicht wie float:left oder float:right etwas mit top und bottom machen?
Ich habs jetzt nicht ausprobiert, aber kannst du nicht zwei Blockelemente nehmen und eines eben top:0; und das andere bottom:0; ausrichten?
Kann man da nicht wie float:left oder float:right etwas mit top und bottom machen?
Ich habs jetzt nicht ausprobiert, aber kannst du nicht zwei Blockelemente nehmen und eines eben top:0; und das andere bottom:0; ausrichten?
Hmh, habs ausprobiert, da tut sich nix! Es wäre ja dann eine relative Angabe innerhalb des <td> Elements, aber nichts tut sich. Klar, wenn ich es absolut setze dann rührt sich was, aber ich will ja innerhalb der Tabellenzelle bleiben und nicht absolut zum Bildschirmrand arbeiten.
Schade.
Gruß
Doc
Hallo Doc,
Kann man da nicht wie float:left oder float:right etwas mit top und bottom machen?
Ich habs jetzt nicht ausprobiert, aber kannst du nicht zwei Blockelemente nehmen und eines eben top:0; und das andere bottom:0; ausrichten?Hmh, habs ausprobiert, da tut sich nix! Es wäre ja dann eine relative Angabe innerhalb des <td> Elements, aber nichts tut sich. Klar, wenn ich es absolut setze dann rührt sich was, aber ich will ja innerhalb der Tabellenzelle bleiben und nicht absolut zum Bildschirmrand arbeiten.
folgende nicht besonders schöne Konstruktion führt zum gewünschten Ergebnis:
a) packe die zwei Textbereiche in ein Containerelement.
b) sorge z.B. mit position: relative dafür, dass das Containerelement
nicht position: static besitzt.
c) gib dem Containerelement eine angemessene Höhe
d) Lass den ersten Textbereich im normalen Fluss, somit klebt er oben.
e) Positioniere den zweiten Textbereich absolut mit bottom: 0.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
[code lang=css] table {
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 1px solid black;
width: 400px;
}
.container {
position: relative;
width: 400px;
height: 100px;
border: 1px solid green;
}
.oben {
border: 1px solid blue;
}
.unten {
position: absolute;
width: 100%;
border: 1px solid red;
bottom: 0;
}
~~~ </style>
</head>
<body>
<h1>Positionierung innerhalb einer Tabellenzelle</h1>
<table>
<tr>
<td>
<div class="container">
<div class="oben">Oben</div>
<div class="unten">Unten</div>
</div>
</td>
</tr>
</table>
</body>
</html>[/code]
Lass Dir diese table-Suppe mit div-Einlage gut schmecken ...
Freundliche Grüße
Vinzenz
Om nah hoo pez nyeetz, Doc_McSky!
Vielleicht hilft http://selfhtml.apsel-mv.de/position/position.html.
Matthias
Hmh, habs ausprobiert, da tut sich nix! Es wäre ja dann eine relative Angabe innerhalb des <td> Elements, aber nichts tut sich. Klar, wenn ich es absolut setze dann rührt sich was, aber ich will ja innerhalb der Tabellenzelle bleiben und nicht absolut zum Bildschirmrand arbeiten.
Äh ja du müsstest das TD dann relativ positionieren ^^
Oh jetzt hab ich den Mund etwas voll genommen, mein Versucht:
<style type="text/css">
#oben {
position:absolute;
top:0;
background-color:#aa0000;
}
#unten {
position:absolute;
bottom:0;
background-color:#00bb00;
}
td {
position:relative;
border:solid 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</td>
<td>
<div id="oben">oben</div>
<div id="mitte">mittig</div>
<div id="unten">unten</div>
</td>
<td>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
</td>
</tr>
</table>
Sorgt dafür dass "oben" zwar (fast) richtig positioniert wird, aber "unten" am Bildschrimrand (wahrscheinlich am Rand von body).
Hm komisch...
Hallo,
Hmh, habs ausprobiert, da tut sich nix! Es wäre ja dann eine relative Angabe innerhalb des <td> Elements, aber nichts tut sich. Klar, wenn ich es absolut setze dann rührt sich was, aber ich will ja innerhalb der Tabellenzelle bleiben und nicht absolut zum Bildschirmrand arbeiten.
Äh ja du müsstest das TD dann relativ positionieren ^^
da das nicht besonders sinnvoll ist, habe ich in die Zelle ein Blockelement relativ positioniert. Das funktioniert wunderbar :-)
Freundliche Grüße
Vinzenz