✔ Tabelle: Zeilen versetzt anordnen

[Microhome]

Hallo ihrs,
ist es via HTML oder CSS möglich, die Zeilen einer Tabelle versetzt anzuordnen. Hier mal eine kleine Skizze zum besseren Verständnis:

|______|_______|---------|---------|
|______|_______|---------|---------|
|______|_______|---------|---------|
|______|_______|---------|---------|
|______|_______|---------|---------|
|______|_______|---------|---------|


Vielen Dank und ein schönes Wochenende!
m!crohome

 

[Sven Mintel]

Moin,

Folgendes scheint zumindest anstazweise zu Funkionieren:
Die Zellen, die "verschoben" werden sollen, benötigen die CSS-Attribute display:inline und position:relative

Dann kannst du durch Zuweisung des CSS-Attributes top die Zellen um den gewünschten Wert verschieben.

 

[Microhome]

Hmmm das scheint leider nicht zu funktionieren, da dadurch die gesamte Tabelle verzerrt wird. Da wird wir wohl nichts anderes überigbleiben, als <br> in jeder tieferstehenden Zelle zu verwenden...

 

[Maik]

Hi,

Hmmm das scheint leider nicht zu funktionieren, da dadurch die gesamte Tabelle verzerrt wird. Da wird wir wohl nichts anderes überigbleiben, als <br> in jeder tieferstehenden Zelle zu verwenden...

dass die Tabelle dadurch "verzerrt" dargestellt wird, liegt dann wohl in der Natur der Sache.

Das <br>-Tag oder ein unterer bzw. oberer Zellinnenabstand simuliert zwar eine vertikale Verschiebung des Zellinhaltes, aber bei Verwendung eines Rahmens oder Hintergrundfarben für die Zellen wird sichtbar, dass sie sich dadurch in dem Tabellengerüst zueinander nicht verschoben haben.

Ansonsten funktioniert Svens Vorschlag in den mir zur Verfügung stehenden gängigen Browsern (FF, IE, Netscape, Opera, Safari) soweit recht gut:

<table>
<tr>
 <td>left</td>
 <td class="right">right</td>
</tr>
<tr>
 <td>left</td>
 <td class="right">right</td>
</tr>
</table>

td {
height:20px;
border:1px solid #000;
}
.right {
display:inline;
position:relative;
top:-10px;
}

mfg Maik

 

[Microhome]

Hi Maik,
ich hab das ganze jetzt einfach in zwei Tabellen gesplittet. Nun muss ich die Schleife zwar zwei Mal durchlaufen, aber das ist kein Problem. Ist am Ende denke ich die sauberste Lösungsvariante.


Vielen Dank für eure Unterstützung!
m!crohome

 

[Sven Mintel]

Ansonsten funktioniert Svens Vorschlag in den mir zur Verfügung stehenden gängigen Browsern (FF, IE, Netscape, Opera, Safari) soweit recht gut

Dachte ich zuerst auch...aber wenn man mehr als 1 verschobene Zelle nebeneinander benötigt, und diese Zellen dann auch noch verschieden viel Inhalt haben, sieht es nur noch im IE passabel aus :-(


@Microhome:
Ich glaub auch, dass dies die sinnvollste Lösung ist.