PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : [CSS] Farbe pro Tabellenspalte wechseln lassen


Laz-Y
2007-05-30, 19:20:57
Ich suche eine Möglichkeit, in einer Tabelle bei jeder Zeile die Farbe zu wechseln. Das soll die Lesbarkeit erhöhen uns soll folgendermaßen aussehen:

Zeile
Zeile
Zeile
Zeile
Zeile

Die Frage ist nun: Kann ich das mit CSS machen?? Über Google bin ich auf folgendes Code-Schnipsel gestoßen das mir aber nicht wirklich weiterhilft
tr:nth-child(2n-1) { background-color:#FFFFFF; }
tr:nth-child(2n) { background-color:#C1C1C1; }

Wisst Ihr wie das geht?

Laz-Y
2007-05-30, 19:23:36
<- zu blöd für CSS

Auf http://www.w3.org/TR/css3-selectors/ stehts beschreiben wies geht...

HellHorse
2007-05-30, 21:02:19
<- zu blöd für CSS

Auf http://www.w3.org/TR/css3-selectors/ stehts beschreiben wies geht...
Das sollte aber nur auf Konqueror gehen (und auf den WebKit nightlies):
http://www.css3.info/modules/selector-compat
Wenn du die Tabelle generierst (PHP, JSP, ASP.NET, ...) kannst du einfach Klassen vergeben (z.B. 'even' und 'odd'). Ganz pöse wäre natürlich JS.

Hardwaretoaster
2007-05-30, 23:09:23
<- zu blöd für CSS

Auf http://www.w3.org/TR/css3-selectors/ stehts beschreiben wies geht...

Das Problem könnte sein, dass es CSS3 ist, das ist noch nicht wirklich etabliert, AFAIR sogar noch nicht mal verabschiedeter Standard, bei zwweiterem bin ich mir aber nicht ganz sicher ;)

HellHorse
2007-05-30, 23:30:15
Das Problem könnte sein, dass es CSS3 ist, das ist noch nicht wirklich etabliert, AFAIR sogar noch nicht mal verabschiedeter Standard, bei zwweiterem bin ich mir aber nicht ganz sicher ;)
Das selector Modul war im Status “Candidate Release” schon im Jahr 2001 und wurde 2005 auf “Last Call” zurückgesetzt. W3C hat den Bezug zur Realität vor Langem verloren. Design by committee in seiner puren Form. Ist irgend jemandem aufgefallen, dass sich XHTML bis heute nicht durchgesetzt hat und keine Änderung in Sicht ist? Aber dafür kräftig an XHTML 2.0 werkeln, alles klar.

Laz-Y
2007-05-31, 03:34:30
Jo Ihr habt recht, :nth-child() funktioniert nicht (bzw. nicht mit den aktuelle Browsern). Habs dann irgendwann eingesehen und aufgegben und statt dessen die Spalten statt die Zeilen abwechselnd markiert.
Was Klassen vergeben angeht müsst ich ja dann jedem tr abwechselnd ne andere klasse zuweisen. und genau das wollt ich vermeiden. ich hatte gehofft es gibt ne elegante(!) lösung mit CSS aber da wurd ich enttäuscht.

es sei denn euch fällt noch was ein!

Laz-Y
2007-05-31, 11:35:03
Achja, in meiner Verzweiflung würd ichs sogar mit javascript machen ;)

LordZed
2007-06-01, 12:41:07
Pro Zeile wechselnde Farben gibt es ja in vielen Tabellen! Hier zum Beispiel wächselt ja bei jedem Post die Farbe hin und her. Wenn ich mich nicht irre, dann wird das so realisiert, dass es dafür einfach 2 CSS-Blöcke gibt. Das könnte dann so aussehen:

.row0
{
background-color: #FFFFFF;
}
.row1
{
background-color: #AAAAAA;
}

Welche gerade dran ist wird dann einfach per PHP gesteuert. Wie genau das da funktioniert ist unterschiedlich. Du könntest einfach ne Variable machen, die sich erhöht oder die nummer hinter dem "row" ist einfach immer die Nummer des Beitrags in DIESEM POST (nicht aller Beiträge) modulo 2 gerechnet. Rest einer division - Rechenzeichen % - also zum beispiel
Zahl = Beitragszaehler % 2
und das wird dann immer angehängt an das "row" und ist halt abwechselnd immer 1 oder 0.
Gibt natürlich auch andere Methoden, aber ich fand die gerade mal ganz cool :-D

//EDIT
ich seh grad hier wechseln die farben garnicht, aber es gibt genug foren bei denen das so ist! (In meiner Gilde zum Beispiel: http://www.sitl.de/forum)

mapel110
2007-06-01, 14:20:18
<?php
$farbe=0;
if($farbe==0)
{
print"<tr bgcolor='#FFFFFF'>";
$farbe=1;
}
else
{
print"<tr bgcolor='#CCCCCC'>";
$farbe=0;
}
?>
So hab ichs in meiner Datenbank gelöst.

DanMan
2007-06-01, 14:53:39
Ganz pöse wäre natürlich JS.
Da sehe ich nicht warum das böse sein soll. Ist schließlich 'ne rein optische Angelegenheit, warum also den Server damit belästigen.

Google hilft: http://www.sitepoint.com/article/background-colors-javascript

HellHorse
2007-06-01, 21:20:54
<?php
$farbe=0;
if($farbe==0)
{
print"<tr bgcolor='#FFFFFF'>";
$farbe=1;
}
else
{
print"<tr bgcolor='#CCCCCC'>";
$farbe=0;
}
?>
So hab ichs in meiner Datenbank gelöst.
Die Rede war von CSS und nicht deprectaed HTML aus dem letzten Jahrtausend welches Markup und Präsentation mixt.