Einzelne Felder in einer Tabellen farblich unterlegen

Gelöst winterstern
(@winterstern)

vor 1 Jahr, 6 Monaten
Moijn,

ich würd gern in einer Tabelle einzelne Felder / Kästen farblich hervorheben. Daher die Hintergrundfarbe ändern. Wie kann ich das ?

Gefunden hab ich bislang, daß ich den Hintergrund der gesamten Tabelle einfärben kann. Dann könnte man natürlich am Quellcode was machen, aber das ist zu kompliziert / individuell. Beides nicht so gut.

Nicht schön ist außerdem, daß die Tabelle in WordPress immer automatisch rot / weiss ist. Erinnert mich an den Leuchtturm in Ameland, aber nur weiss ohne diese Automatik wärs besser.

Ein besseres Plugin speziell für Tabellen würde das Problem wohl beheben, da bin ich aber nicht fündig geworden.
- Dieses Thema wurde geändert vor 1 Jahr, 6 Monaten von winterstern.
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)

bscu
(@bscu)

vor 1 Jahr, 6 Monaten
Das kann man per CSS regeln. Verantwortlich für diese rosa Balken ist:
```
table tbody tr:nth-child(2n+1) {
  background: rgba(241,86,65,0.15);
}
```
Wenn du das im Custom-CSS überschreibst, sollte es passen.

Ich möchte darauf hinweisen, dass wir hier bei WordPress-Fragen helfen. CSS-Probleme gehören in der Regel nicht dazu.
Eine gute Möglichkeit, sich mit CSS zu beschäftigen, findest du z. B. hier, hier oder hier.
- Diese Antwort wurde geändert vor 1 Jahr, 6 Monaten von bscu.
Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr, 6 Monaten
Hallo @winterstern

Die rosa Hintergrundfarbe jeder ungeraden Reihe kommt daher
```
table tbody tr:nth-child(odd) {
    background: rgba(241,86,65,0.15);
}
```
kannst du ändern durch
```
table tbody tr:nth-child(odd) {
    background: transparent;
}
```
Angenommen, du willst die Tabellenzelle mit dem Inhalt 24h (ganz rechts) mit schwarzer Hintergrundfarbe und weißer Textfarbe belegen, dann trag erst einmal für die Tabelle eine CSS-Klasse ein (du kannst dir einen beliebigen, aussagekräftigen Namen ausdenken). Tabelle auswählen, rechte Seitleiste ganz unten. Füge jetzt mal zellenfarbe dort ein. Der CSS-Code sieht dann wie nachfolgend aus.

Trag im Adminbereich unter Design »» Customizer »» Zusätzliches CSS das Folgende ein (ganz ans Ende packen):
```
table.zellenfarbe tr:nth-child(2) td:nth-child(5) {
    background: black;
    color: white;
}
```
Erläuterung:

Du musst zählen, Reihe von oben nach unten und Zellen von links nach rechts.

tr:nth-child(2) = zweite Reihe von oben
td:nth-child(5) = fünfte Zelle von links`

Für mehrere Tabellenzellen mit derselben Hintergrund- und Textfarbe (angenommen beide Zellen mit Inhalt 24h):
```
table.zellenfarbe tr:nth-child(2) td:nth-child(5),
table.zellenfarbe tr:nth-child(2) td:nth-child(4) {
    background: black;
    color: white;
}
```
Nach dem Abspeichern musst du den Browsercache leeren, drücke dafür CTRL SHIFT Entf gleichzeitig, dadurch wird in den gängigen Browsern ein Fenster zum Löschen geöffnet (weitere Hilfe dazu).

Solltest du ein Cache-Plugin installiert haben, leere auch diesen Cache. Nun teste auf der Seite, ob du eine Änderung siehst.

Wir helfen hier bei Anwendungsproblemen, die in Zusammenhang mit WordPress auftauchen. Deine Fragen/Probleme sind jedoch bezogen auf CSS, da geben wir hin und wieder auch mal den einen oder manchmal auch mehrere Tipp/s.

Für weitere Fragen wurden dir im obigen Beitrag Links zum Erlernen von CSS genannt. Ich ergänze diese mit einem Link zu einem Hilfe- und Austausch-Forum für (u. a.) CSS -> Forum
Thread-Starter winterstern
(@winterstern)

vor 1 Jahr, 6 Monaten

Recht herzlichen Dank erst einmal für die ausführlichen Antworten. Obwohl ich das so nicht umsetzen konnte, hat mich das wirklich sehr gefreut.

Tabellen scheinen eher eine Nische in der WordPress Welt zu sein. Ich hab exakt ein Plugin dazu gefunden: das TablePress plugin. Das ermöglicht dem Durchschnittsblogger leider auch nicht, Felder einzufärben. Aber: dort kann man CSS Code einfügen, wie von euch beiden vorgeschlagen. Ich hab damit etwas herum experimentiert, leider ohne Erfolg.

Daraufhin hab ich jetzt kurzerhand einen Screen Shoot gemacht, zwei Felder mit einem Malprogramm rot eingefärbt und das ganze als Bild eingebunden. Die rosa Streifen sind weg und es sieht so aus wie geplant.

Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr, 6 Monaten

@winterstern

es ist sehr schade, dass wir dir nicht vermitteln konnten, wie du das Problem in den Griff bekommen kannst.

Der von uns genannte CSS-Code war nicht für ein neues Plugin (TabelPress) gedacht, sondern für die Tabelle, die du per Block Table bereits eingefügt hattest.

Beim Schreiben des Artikels hattest du den Block Tabelle eingefügt. Diesen Block per Klick auswählen. In der rechten Seitenleiste, Tab „Block“ findest du ganz unten „Erweitert“ (muss man aufklappen) das Eingabe-Feld „Zusätzliche CSS-KLasse(n)“. Dort hättest du das Wort zellenfarbe einfügen sollen. Beitrag/Seite speichern. Nun in der linken Seitenleiste -> Design -> Customizer klicken, dort auf „Zusätzliches CSS“ und den angegebenen CSS-Code einfügen, speichern.

Ein Bild ist eine suboptimale Lösung in vielerlei Hinsicht.

Thread-Starter winterstern
(@winterstern)

vor 1 Jahr, 6 Monaten

Ich weiss, daß das kein gutes Design ist.

Das wäre: ein Bild ist schlecht skalierbar, größer als Text, nicht indexierbar, spätere Änderungen oder Ergänzungen kann ich auch vergessen.

Hoffentlich kommt eines Tages ein Plugin raus, mit dem es möglich ist, ansprechende Tabellen ohne Lernkurve und ohne den Verlust von Lebenszeitslots in Null,nix zu erstellen.

Bis dahin hoffe ich, daß dem einen oder anderen der Thread hier weiter hilft. Danke nochmals für die Hilfe, hat mich positiv berührt.

bscu
(@bscu)

vor 1 Jahr, 6 Monaten

@winterstern

Bis dahin hoffe ich, daß dem einen oder anderen der Thread hier weiter hilft.

Ich hoffe eher nicht, denn ein Bild aus der Tabelle zu machen ist der falsche Weg. Selbst mit WordPress kommt man manchmal nicht an CSS-Kenntnissen vorbei.

Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 6 Monaten

Es gibt diverse Tabellen-Plugins. Hier werden z.B. sieben verschiedene Plugins vorgestellt: 7 Best WordPress Block Editor Table Plugins (Gutenberg)

Mit dem Plugin PublishPress Blocks lassen sich für einzelne Zellen Hintergrund- und Textfarbe beliebig anpassen:

(zum Vergrößern anklicken)

Dass der Tabellen-Block im WordPress-Core eingeschränkte Formatierungsmöglichkeiten hat, ist kein Bug, sondern ein Feature. Die Gestaltung der Tabellen ist Aufgabe des Themes. Sicher kann man geteilter Meinung sein, ob rote und weiße Linien gestalterisch ansprechend sind, an Ringelsocken oder Leuchttürme erinnern, aber es ist auch nicht sinderlich kompliziert ein anderes Theme auszuwählen, dass eine ansprechendere Gestaltung bietet.