[CSS] Tabellen

[Anbu]

Hi,

ich habe ein Tabellenproblem. Da Rules im Stylesheet nicht zur Verfügung steht, musst ich eine Alternative wählen. Im Mozilla ging es mit firstchild. Im IE mit expressions.

Doch beim IE stoße ich mit den Expressions jetzt an meine Grenzen.

Wie schaffe ich es Tabellen Rahmen zwischen den Zeilen zu haben aber keinen Top und Bottom Border in der Tabelle selbst.

[AmicaNoctis]

Hallo,

Da Rules im Stylesheet nicht zur Verfügung steht, musst ich eine Alternative wählen.

ich kann dir nicht folgen.

Wie schaffe ich es Tabellen Rahmen zwischen den Zeilen zu haben aber keinen Top und Bottom Border in der Tabelle selbst.

Auch das ist etwas schwammig. Meinst du evtl. Rahmen für tr-Elemente?

Wie auch immer, unbedingt lesen: collapsing borders

Gruß,

Amica

[Anbu]

Ok hast mich falsch verstanden

collapsing borders hat nichts mit meinem Problem zu tun. Ich will einzig und allein Border zwischen jeder Zeile(tr) haben, nicht aber am anfang und ende der Tabelle. Im Prinzip das Css equivalent zu rules="rows".

Im Mozilla habe ich das Problem mithilfe von Vererbung und firstchild gelöst, im IE habe ich bisjetzt keinen Weg gefunden das zu tun.

jetzt klarer?

[AmicaNoctis]

Genau das wird dort aber auch behandelt (17.6.2.1 Border conflict resolution). Setz einfach den Rahmen des table-Elements auf

border: 0 hidden transparent;

Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

[Anbu]

ok vielleicht seh ich grad den Wald vor lauter Bäumen nicht... aber es hat nicht wirklich was gebracht

Also die definition im Main Stylesheet(Mozilla):

.tabelle-Rahmen-rechts-Zeilen {
	border-right: 1px solid #000000;
}
.tabelle-Rahmen-rechts-Zeilen td {
	border-top: 1px solid #000000;
}
.tabelle-Rahmen-rechts-Zeilen tr:first-child td {
	border: none;
}

Und hier einer meiner Ansätze im IE Stylesheet:

.tabelle-Rahmen-rechts-Zeilen tr td {
	border-top: expression(this.previousSibling==null?'none':'1px solid #000000');
}

klar dass er hier immer nur das erste td vom tr anspricht

[AmicaNoctis]

Wie soll es denn aussehen? Mal es doch einfach auf
Vielleicht kann man dir dann gezielter helfen.

Dass none nicht dasselbe ist wie hidden, ist aber angekommen, oder?

[Anbu]

Also mit diesen Klassen im IE8 Stylesheet hab ich zwischen jeder Zeile einen Border aber auch ganz am schluss der Tabelle. Was hab ich denn vergessen?

.tabelle-Rahmen-rechts-Zeilen {
	border: none;
	border-bottom: 0 hidden transparent;
}
.tabelle-Rahmen-rechts-Zeilen td {
	border: none;
	border-bottom: 1px solid #000000;
}

ok ich mals mal auf moment

Also so soll die Tabelle aussehen(gestrichelte Linie = Border):

test test test test test test
---------------------------------
test test test test test test
---------------------------------
test test test test test test
---------------------------------
test test test test test test
---------------------------------
test test test test test test
---------------------------------
test test test test test test

[AmicaNoctis]

Was hab ich denn vergessen?

Das Online-Beispiel

CSS ist ohne den zugehörigen HTML-Code schwer nachzuvollziehen. Wenn man dann noch nur einen Teil davon sieht und der auch noch aus Regeln ohne Elementselektoren besteht und nur irgendwelche Klassen anspricht, kann man das gar nicht mehr nachvollziehen.



Zu deiner Skizze – ganz simpel:

table { border: 0 hidden transparent; border-collapse: collapse; }
tr { border: 1px dashed #000; }

[Anbu]

hmm hat leider nicht geklappt. So jetzt mal komplett

Die Tabelle

<table border="0" cellpadding="0" cellspacing="0" class="tabelle-Rahmen-rechts-Zeilen" >
	<tr>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
	</tr>
	<tr>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
	</tr>
	<tr>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
	</tr>
	<tr>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
	</tr>
	<tr>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
	</tr>
	<tr>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
		<td>test</td>
	</tr>
</table>

Main - CSS:

.tabelle-Rahmen-rechts-Zeilen {
	border-right: 1px solid #000000;
}
.tabelle-Rahmen-rechts-Zeilen td {
	border-top: 1px solid #000000;
}
.tabelle-Rahmen-rechts-Zeilen tr:first-child td {
	border: none;
}

IE8 Stylesheet:

.tabelle-Rahmen-rechts-Zeilen {
	border: none;
	border-right: 1px solid #000000;
	border-bottom: 0 hidden transparent;
	border-collapse: collapse;
}
.tabelle-Rahmen-rechts-Zeilen tr {
	border: expression(this.previousSibling==null?'none':'1px solid #000000');
}

So jetzt ist alles da. Zurzeit sieht es im IE8 so aus:

- Rahmen zwischen den Zeilen - schön und gut
- Tabellenrahmen rechts - schön und gut
- Tabellenrahmen oben - nicht gewollt

[AmicaNoctis]

Warum ignorierst du alles, was ich dir zu erklären versucht hab und wunderst dich dann noch, dass es immer noch nicht funktioniert?

[Anbu]

?? hab deine Änderungen doch im IE8 Style

[AmicaNoctis]

Aber warum so umständlich?
Hier Quelltext angucken!

[Anbu]

habs.

Die Expression im IE war falsch:

.tabelle-Rahmen-rechts-Zeilen td {
	border: none;
}
.tabelle-Rahmen-rechts-Zeilen {
	border: none;
	border-right: 1px solid #000000;
	border-top: 0 hidden transparent;
	border-collapse: collapse;
}
.tabelle-Rahmen-rechts-Zeilen td {
	border-top: expression(parentNode.previousSibling==null?'none':'1px solid #000000');
}

hab jetzt einfach in der expression das parentnode also das tr angesprochen

Edit: Oh hab deinen Post erst grad gesehen

[AmicaNoctis]

Ganz toll, nur das diesen expression-Mist keiner braucht – siehe vorheriges Posting.

Edit: Achso.

[Anbu]

Werd ich mir merken dass man den IE auch anders behandeln kann

danke nochmal!!