Tabelle per CSS gestalten?

[noxx2]

Hallo,

kann ich per CSS eine Tabelle gestalten? Leider
fehlt mir da etwas die Erfahrung, aber jede Zelle einzeln
zu bearbeiten, finde ich etwas zu aufwendig.

Ich möchte:

- Jede gerade Zeile BLAU, Schrift WEISS
- Jede ungerade Zeile CYAN, Schrift Schwarz

Gruss

 

[Xeno]

Hallo,

kann ich per CSS eine Tabelle gestalten?

Klar. Weise einfach den entsprechenden Selektoren (das werden wol z. B. "table", "th", "td" usw. sein) die gewünschten CSS-Eigenschaften (Deklarationen) zu.

Ich möchte:

- Jede gerade Zeile BLAU, Schrift WEISS
- Jede ungerade Zeile CYAN, Schrift Schwarz

Du könntest den verschiedenen Zeilen verschiedene Klassen (also etwa den geraden class="gerade" und den ungeraden class="ungerade") zuweisen und diese Klassen im CSS gezielt deklarieren. Das kann aber dennoch aufwändig sein, wenn Du viele oder lange Tabellen in vielen Unterseiten hast. Es gibt im neueren CSS das Pseudoelement :nth-child, mit der gezielt Elemente gezählt werden können. Die Anweisung :nth-child(2n) hat das von Dir gewünschte Resultat (jedes zweite Element anders). Haken: Funktioniert im Internet-Explorer erst ab Version 9.

Lg Xeno

P.S.: Gibt hier weit erfahrenere Poster als mich, und gibt sicher noch weitere Lösungen.

 

[Tronjer]

Fallen mir drei Möglichkeiten ein:

- per CSS mit :nth-child()
- jQuery dd Selector
- Die Ausgabe der <tr> per PHP in einer Schleife und mit Überprüfung auf Modulo 2 ($i % 2 == 0)

 

[noxx2]

danke.... ich werde es mal mit nth-child() probieren.

gruss

 

[noxx2]

Danke für den Tipp, war einfacher als ich dachte.

    tr:nth-child(odd) {
    background-color: #3C53C2; <!-- Blau -->
    color: #ffffff;
    }

    tr:nth-child(even) {
    background-color: #ffffff; <!-- Weiss -->
    color: #3C53C2;
    }

Wieso ändert sich die Schriftfarbe nicht in den Zeilen? Die Hintergrundfarbe
wechselt wie gewollt.

Gruss

 

[thuemmy]

Das ist nur eine Vermutung, aber <tr>-Elemente können wohl keinen Text enthalten, sondern nur Tabellenzellen. Versuch mal

    tr:nth-child(even) td {
    color: #3C53C2;     }

Ob das funktioniert, das weiß ich nicht, aber ein Versuch isses wert.

 

[Asterixus]

Nein, es liegt daran, dass Kommentare in CSS nicht zwischen <!-- und --> geschrieben werden, sondern zwischen /* und */, was einen Syntaxfehler verursacht hat.