CSS Background color in Tabellenzeilen

[Jörg]

Hallo,

#myTable tr:nth-child(odd) td{
    background-color: #E9E9E9
}
#myTable tr:nth-child(even) td{
    background-color: #FFFFFF
}
#myTable .we{
    background-color: #FFE697
}

Leider funktioniert mein gelber Hintergrund für Wochenendzeilen nur dann, wenn ich die alternierenden Hintegründe für normale Zeilen weglasse.

Wie bekomme ich beides zum arbeiten?

Gruß, Jörg

[Der Martin]

Hallo,

#myTable tr:nth-child(odd) td{
    background-color: #E9E9E9
}
#myTable tr:nth-child(even) td{
    background-color: #FFFFFF
}
#myTable .we{
    background-color: #FFE697
}

Leider funktioniert mein gelber Hintergrund für Wochenendzeilen nur dann, wenn ich die alternierenden Hintegründe für normale Zeilen weglasse.

ja, der Grund heißt Spezifizität. Salopp ausgedrückt: Je präziser ein CSS-Selektor ist, desto höher ist sein Ranking. Ein präzise formulierter Selektor sticht einen anderen, der auf dasselbe Element zutrifft, aber allgemeiner formuliert ist. Das SELF-Wiki erklärt's genauer.

Wie bekomme ich beides zum arbeiten?

Du musst den Selektor für die Wochenend-Zeilen mindestens ebenso spezifisch machen wie die odd/even-Selektoren für die Werktage, z.B. #myTable tr.we td.

Live long and pros healthy,
 Martin

[Jörg]

Hi,

Du musst den Selektor für die Wochenend-Zeilen mindestens ebenso spezifisch machen wie die odd/even-Selektoren für die Werktage, z.B. #myTable tr.we td.

Hätte eigentlich gedacht, dass ich das nun gemacht habe, aber es arbeitet nicht 😕

Jörg

[Gunnar Bittersmann]

@@Jörg

Hätte eigentlich gedacht, dass ich das nun gemacht habe, aber es arbeitet nicht 😕

#myTable .tr.we td – Es gibt keine Elemente, welche den Klassen tr und we angehören.

😷 LLAP

[Jörg]

Hi Gunnar,

#myTable .tr.we td – Es gibt keine Elemente, welche den Klassen tr und we angehören.

Verteufelt, das war wohl der "Extrapunkt", den ich mir verdienen wollte 😉

Danke für die Hilfe.

Jörg

[Gunnar Bittersmann]

@@Jörg

Wie gesagt, ich würde nicht Klassen wie dido und we vergeben, sondern jedem Wochentag seine eigene Klasse spendieren und .di, .do und .sa, .so stylen.

Dann musst du bei späteren Änderungen (beispielsweise wenn du nicht Sonnabend und Sonntag, sondern nur Sonntag hervorheben willst) nicht noch mal die Logik anfassen, sondern nur noch das Stylesheet.

😷 LLAP

[Gunnar Bittersmann]

@@Jörg

#myTable tr:nth-child(odd) td{
    background-color: #E9E9E9
}

Damit stylst du Tabellenzellen.

#myTable .we{
    background-color: #FFE697
}

Damit stylst du was? Tabellenzeilen? (Rate ich jetzt mal; du hast vergessen, dein Markup zu posten.)

Wenn du auf eine graue Tischdecke (<tr>) eine gelbe Tischdecke (<td>) legst, was siehst du dann noch von der grauen?

Du möchtest auch am Wochenende Tabellenzellen stylen?

Oder auf die zweifelhaften Zebrastreifen verzichten?

😷 LLAP

[Rolf B]

Hallo Gunnar,

Oder auf die zweifelhaften Zebrastreifen verzichten?

Ob sie zweifelhaft sind oder nicht wurde schon damals bezweifelt. Es hängt von der Tabelle ab, ob ein Streifenmuster als Lesehilfe nützlich ist oder nicht.

Schmale Tabelle (über'n Daumen: wenige Spalten, insgesamt unter 20em): Unnötig, einverstanden. Es sei denn, die Spalten sind breit und nicht unbedingt voll.

Breite Tabelle (5+ Spalten, oder weniger, aber breit): Hilfreich. Vor allem dann, wenn jede Row nur eine Textzeile enthält. Trennlinien neigen dann dazu, vor den Augen zu verschwimmen. Zumindest vor meinen. Ich habe bei unicolor-Tabellen durchaus schon ein anderes Fenster herbeigezogen und als Orientierungslineal verwendet.

Eine Popup-Lesehilfe, wie beatovich damals vorschlug... Sicherlich die schlechtere Lösung als eine visuelle Orientierungshilfe. Eine Tabelle ist eben doch noch was anderes als eine Liste von Zeilen, und der 2D-Nutzen geht verloren, wenn man für die Rows eine zusätzliche Detailansicht braucht, um sich nicht im Datengestrüpp zu verlaufen. Eine Hover-Funktion, um die aktuelle Zeile/Spalte hervorzuheben, ist ein nettes Addon, aber nur begrenzt bedienbar.

Was allerdings im oben beschriebenen Kontext tatsächlich gestalterisch zweifelhaft ist, ist ein Streifenmuster mit even/odd. Das führt bei einer Liste mit Siebentage-Rhythmus nämlich dazu, dass in der einen Woche Di/Do den Streifen haben und in der Folgewoche ist es Mo/Mi/Fr. D.h. man müsste, wenn man schon Streifen macht, zwei Selektoren verwenden, einen mit 7n+X und einen mit 7N+(X+2), wobei X und X+2 je nach dem Anfangstag der Liste zu wählen sind. Das ist nicht so einfach.

Aber wenn man die table ohnehin schon so generiert, dass Wochenend-Rows die Klasse .we bekommen, dann wäre es wohl auch möglich, für mo-fr ähnliches zu tun. Und dann könnte man ganz leicht so vorgehen:

tr.di, tr.do {
   /* Streifen */
}
tr.we {
   /* WE */
}

Rolf

[Gunnar Bittersmann]

@@Rolf B

Oder auf die zweifelhaften Zebrastreifen verzichten?

Ob sie zweifelhaft sind oder nicht wurde schon damals bezweifelt.

Ich hab niemanden davon abgehalten, auch die Antworten auf mein verlinktes Posting zu lesen. 😉

Was allerdings im oben beschriebenen Kontext tatsächlich gestalterisch zweifelhaft ist, ist ein Streifenmuster mit even/odd. Das führt bei einer Liste mit Siebentage-Rhythmus nämlich dazu, dass in der einen Woche Di/Do den Streifen haben und in der Folgewoche ist es Mo/Mi/Fr.

Ja, das ist blöd.

Aber wenn man die table ohnehin schon so generiert, dass Wochenend-Rows die Klasse .we bekommen, dann wäre es wohl auch möglich, für mo-fr ähnliches zu tun.

Dann würde ich konsequent sein und nicht eine Klasse we vergeben, sondern sa bzw. so und das Wochenende mit .sa, .so { … } stylen.

Es bietet sich aber auch an, die Wochentage einer Woche zu gruppieren, d.h. jede Woche bekommt ihren eigenen tbody. Dann kann man odd/even verwenden. (Beispiel)

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Es bietet sich aber auch an, die Wochentage einer Woche zu gruppieren, d.h. jede Woche bekommt ihren eigenen tbody. Dann kann man odd/even verwenden. (Beispiel)

Nochmal drüber nachgedacht: Für die erste Woche des Monats haut das nicht hin, wenn der 1. auf einen Dienstag oder Donnerstag fällt. Für die erste Woche muss man von hinten zählen: nth-last-child. Codepen um Juni ergänzt und berichtigt.

😷 LLAP

[Der Martin]

Hallo,

Es bietet sich aber auch an, die Wochentage einer Woche zu gruppieren, d.h. jede Woche bekommt ihren eigenen tbody. Dann kann man odd/even verwenden. (Beispiel)

Nochmal drüber nachgedacht: Für die erste Woche des Monats haut das nicht hin, wenn der 1. auf einen Dienstag oder Donnerstag fällt. Für die erste Woche muss man von hinten zählen: nth-last-child.

aber nur, wenn man an der Monatsgrenze einen Schnitt machen will. Will man das? Also ich nicht.

Der Wechsel von Mai zu Juni hat für mich im Gegensatz zum Wochenrhythmus keinerlei Bedeutung, ich würde das daher fortlaufend ohne Berücksichtigung des Monats machen.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Gunnar,

clevere Idee.

Ich hoffe, dass ein tbody nicht irgendwelche semantischen Nebenwirkungen hat, die stören könnten.

Hallo Martin,

Der Wechsel von Mai zu Juni hat für mich im Gegensatz zum Wochenrhythmus keinerlei Bedeutung

Fettsatz von mir ergänzt. Du weißt schon was ich meine 😉

Da Jörg in dieser Richtung nichts geschrieben hat (was mir jetzt präsent wäre), befinden wir uns allesamt im Advent (wo's reichlich Spekulatius gibt).

Rolf

[Der Martin]

Hallo Rolf,

Der Wechsel von Mai zu Juni hat für mich im Gegensatz zum Wochenrhythmus keinerlei Bedeutung

Fettsatz von mir ergänzt. Du weißt schon was ich meine 😉

jaja, klar. Die Apposition hatte durchaus bewusst gesetzt. Für mich ist das Jahr eine Folge von gleichartig strukturierten Wochen; die Monate als übergeordnete Struktur sind eher eine grobe Orientierung ohne konkrete Bedeutung. Deswegen sind meine Kalender auch als Tabellen mit 365 (oder 366) Zeilen organisiert. Für andere Menschen mögen andere Prioritäten gelten.

Da Jörg in dieser Richtung nichts geschrieben hat (was mir jetzt präsent wäre), befinden wir uns allesamt im Advent (wo's reichlich Spekulatius gibt).

Und ich mag doch gar keinen Spekulatius ... 😟

Live long and pros healthy,
 Martin

[Jörg]

Hallo Rolf,

Da Jörg in dieser Richtung nichts geschrieben hat (was mir jetzt präsent wäre), befinden wir uns allesamt im Advent (wo's reichlich Spekulatius gibt).

Ok, ich kläre auf:

Der Wechsel von Mai zu Juni hat für mich im Gegensatz zum Wochenrhythmus keinerlei Bedeutung

Ich selber bin da komplett bei Martin.

Der User kann sich komplett beliebige Daten anzeigen lassen, daher ist für mich im Sinne des Users auch ausschließlich der Wochenrhytmus von Bedeutung, ein Schnitt am Monatsende wird zwar häufig vorkommen, aber ist für mich n icht entscheidend, da nicht zwingend.

Jörg

[Rolf B]

Hallo Jörg,

komplett beliebige

D.h. auch von Freitag 07.05. bis Montag 10.05.

Die globalgalaktische even/odd Lösung würde den Freitag weiß machen und den Montag grau (oder umgekehrt). Das ist okay?

Rolf

[Jörg]

Hallo Rolf,

D.h. auch von Freitag 07.05. bis Montag 10.05.

Ja, ja, ganz genau.

Die globalgalaktische even/odd Lösung würde den Freitag weiß machen und den Montag grau (oder umgekehrt). Das ist okay?

Ist vollkommen ok. Das Zebramuster soll nicht hauptsächlich nett aussehen, sondern ermöglichen, dass der User beim links- nach rechtseitigen Zeilenverfolgen nicht so leicht in der Zeile verrutscht. Das ist mir selber nämlich permanent beim Testen passiert, daher musste Abhilfe her. Ich wüßte aber nicht mal, was mir besser gefällt: Erst dunkel, dann hell oder umgekehrt.

Jörg

[Rolf B]

Hallo Jörg,

Kompromissvorschlag: https://jsfiddle.net/Rolf_b/3aqr72fc/

😉

Rolf

[Jörg]

Hallo Jörg,

Kompromissvorschlag: https://jsfiddle.net/Rolf_b/3aqr72fc/

😉

Hallo Rolf,

Nicht Dein Ernst, oder? 😲🧐

Hoffentlich hat das keine Arbeit verursacht. 😉😇

Danke trotzdem... 😊

Jörg

[ottogal]

Hallo Rolf,

Was allerdings im oben beschriebenen Kontext tatsächlich gestalterisch zweifelhaft ist, ist ein Streifenmuster mit even/odd. Das führt bei einer Liste mit Siebentage-Rhythmus nämlich dazu, dass in der einen Woche Di/Do den Streifen haben und in der Folgewoche ist es Mo/Mi/Fr.

Oder man macht wie im Buddhismus aus dem Mittwoch zwei Tage... 😉

[Der Martin]

Hallo,

Was allerdings im oben beschriebenen Kontext tatsächlich gestalterisch zweifelhaft ist, ist ein Streifenmuster mit even/odd. Das führt bei einer Liste mit Siebentage-Rhythmus nämlich dazu, dass in der einen Woche Di/Do den Streifen haben und in der Folgewoche ist es Mo/Mi/Fr.

Oder man macht wie im Buddhismus aus dem Mittwoch zwei Tage... 😉

naja ... also da hätte ich doch lieber zwei Samstage!

Live long and pros healthy,
 Martin

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Du möchtest auch am Wochenende Tabellenzellen stylen?

Oder noch besser auch in der Woche die Tabellenzeilen stylen? (Beispiel)

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Beispiel

Dort auch zu sehen: Proportionalziffern (proportional numbers pnum) in der Tabellenüberschrift; dicktengleiche Ziffen (tabular numbers tnum) in den Tabellenzellen – besonders gut erkennbar an der 1.

Hab gerade erst gestern was über OpenType-Features erzählt. (Ich füge später noch Screenshots von den Codepens in die Vortragsfolien ein.)

😷 LLAP

[MudGuard]

Hi,

Dort auch zu sehen: Proportionalziffern (proportional numbers pnum) in der Tabellenüberschrift;

tcaption? Wurde das in HTML5 umbenannt? Ich kenn das als caption (aus HTML 4.01 oder früher).

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

tcaption? Wurde das in HTML5 umbenannt? Ich kenn das als caption (aus HTML 4.01 oder früher).

Ach deshalb hatte das mit dem Abstand darunter nicht geklappt. 🤦‍♂️

Gefixt. Danke.

😷 LLAP

[MudGuard]

Hi,

tcaption? Wurde das in HTML5 umbenannt? Ich kenn das als caption (aus HTML 4.01 oder früher).

Ach deshalb hatte das mit dem Abstand darunter nicht geklappt. 🤦‍♂️

Gefixt. Danke.

Und ich dachte schon, es gibt dann auch noch ein lcaption für Listen und ncaption für navi und …

cu,
Andreas a/k/a MudGuard

[Jörg]

Hallo Martin, Gunnar, Rolf
...und alle sonstigen Mitleser,

wie schön, dass ich diese Frage gestellt habe. ich habe über die eigentliche Antwort hinaus doch noch eine ganze Menge mehr mitnehmen können, dank Euch herzlich. 👍

Danke auch für Eure Codeschnipsel und Beispiele, die ich jetzt mal etwas näher studieren werden.

Jörg