So sorgen Sie für Übersicht

Teil 2: Workshop CSS: Aufklappbare Elemente

Die Kopf- und die Fußzeile erhalten die gleiche Formatierung. Deswegen können Sie die drei Elemente table.aufklappen thead th, table.aufklappen tfoot th und table.aufklappen tfoot td auch mit den identischen Eigenschaften versehen:

border-style: solid;
border-width: 1px;
border-color: #cff;
background: #0066CC;
padding: 5px 5px;

Alle Zellen erhalten einen Rahmen der Breite 1px und einer hellblauen Farbe. Der Hintergrund ist dunkelblau und der Abstand von oben und unten beträgt jeweils 5px. Die Hintergrundfarbe der Tabelle setzen Sie über den body-Bereich Ihrer Tabelle:

table.aufklappen tbody {
background:#FFFF66; }

Aus optischen Gründen hat die Tabelle keinen rechten und linken Tabellenrahmen. Dies lässt sich am einfachsten über eine nicht ganz korrekte Verwendung des Tags <th> realisieren.

CSS-Workshop

© Archiv

Komprimiert sehen Sie nur noch die Kopf- und Fußzeile der Tabelle.

Dies wird im Beispiel nicht nur für die Header-Zeile, sondern jeweils auch für die erste Zelle einer jeden Inhaltsspalte verwendet. Dadurch lassen sich dann auch der linke und rechte Rand mit einfachen Mitteln entfernen:

table.aufklappen tbody th {
padding: 5px 5px;
border: 1px solid #000000;
border-left: none; }

Der Rand um die Zelle mit einem Pixel Breite in der Farbe Schwarz verschwindet für die erste Reihe komplett.

Das gleiche Verfahren wenden Sie für die restlichen Zellen an, die als normale Datenzelle mit <td> definiert sind. Dabei verschwindet der rechte Rand und wird jeweils durch den linken der Folgezelle ersetzt - außer bei der letzten Zelle, sodass der gewünschte Effekt entsteht.

table.aufklappen tbody td {
padding: 5px 5px;
border: 1px solid #000000;
border-right: none; }

Die abwechselnde Zeilenfarbe erreichen Sie durch die bereits erwähnte Klasse eins. Diese ändert die Hintergrundfarbe in einen Ton zwischen hellblau und türkis.

table.aufklappen tbody tr.eins {
background: #99CCFF; }

Klappen

Damit haben Sie die Grundlagen für das Herzstück des Effekts gelegt - eine kompakte Javascript-Funktion. Die Tabelle soll die Inhalte preisgeben, wenn ein Doppelklick auf die Fußzeile erfolgt und bei einem erneuten Klick wieder verbergen.

Das Skript ist einfach aufgebaut und liest als Erstes alle Tabellen in den internen Speicher. Handelt es sich um eine Tabelle der Klasse aufklappen, so wird der entsprechende Mechanismus aktiviert. Anschließend wird die Fußzeile klickbar gemacht und die Inhalte der Tabelle - abhängig vom aktuellen Zustand - entweder angezeigt oder verborgen. Zum Aufruf des Skripts wird die Ladefunktion der Seite zu Hilfe genommen.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".