Trick # 540 | Dieser Beitrag beinhaltet 559 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Einst waren Tabellen auf Websites allgegenwärtig. Heute deutlich weniger – auch weil Tabellen im Responsive Design nicht ganz unproblematisch sind. Aber so ganz verzichten kann man denn doch nicht auf Tabellen. Damit sie aber wenigstens übersichtlich daher kommen, empfiehlt sich ein wenig CSS-Design. Ein paar Handgriffe helfen schon. Zum Beispiel mit abwechselnder Farbgebung der Zeilen.
Schauen wir uns das näher an. Eine normale Tabelle aus dem Editor sieht in etwa so aus:
| Lorem ipsum dolor | Labore et dolore | At vero eos et accusam | Magna aliquyam | Labore et dolore |
| Justo duo dolores et ea | Magna aliquyam | Lorem ipsum dolor | At vero eos et accusam | Lorem ipsum dolor |
| At vero eos et accusam | Justo duo dolores et ea | Labore et dolore | Magna aliquyam | Justo duo dolores et ea |
| Labore et dolore | Lorem ipsum dolor | Justo duo dolores et ea | Magna aliquyam | At vero eos et accusam |
| At vero eos et accusam | Lorem ipsum dolor | Justo duo dolores et ea | Magna aliquyam | Labore et dolore |
Nicht eben der Hit in Sachen Übersichtlichkeit. Oder?
Das geht natürlich besser. CSS machts möglich. Der folgende Code gehört in das CSS-Stylesheet – im Backend unter Design/Customizer/Zusätzliches CSS:
table {
font-size: 80%;
}
td {
padding: 5px;
}
thead {
font-weight: 700;
background-color: #293280;
color: #ffffff;
border: 1px solid #343434;
}
tbody {
border: 1px solid #343434;
}
tbody tr:nth-child(even) {
background-color: #ddefdb;
}
tbody tr:nth-child(odd) {
background-color: #ffffff;
}Mit diesem Code (der sich natürlich formidabel an beliebige Bedürfnisse anpassen lässt) sieht obige Tabelle nun so aus:
| Lorem ipsum dolor | Labore et dolore | At vero eos et accusam | Magna aliquyam | Labore et dolore |
| Justo duo dolores et ea | Magna aliquyam | Lorem ipsum dolor | At vero eos et accusam | Lorem ipsum dolor |
| At vero eos et accusam | Justo duo dolores et ea | Labore et dolore | Magna aliquyam | Justo duo dolores et ea |
| Labore et dolore | Lorem ipsum dolor | Justo duo dolores et ea | Magna aliquyam | At vero eos et accusam |
| At vero eos et accusam | Lorem ipsum dolor | Justo duo dolores et ea | Magna aliquyam | Labore et dolore |
Interessant wird es vor allem ab der Zeile 16 des CSS-Codes. Dort wird festgelegt, dass alle geraden Zeilen (even) farblich anders hinterlegt sind als die ungeraden (odd).
Ist doch schon gutes Stück übersichtlicher. Oder?
Werbung
Werbung
