So sorgen Sie für Übersicht

Teil 2: Workshop CSS: Aufklappbare Elemente

21.8.2009 von Redaktion pcmagazin und Andreas Hitzig

ca. 1:35 Min
Ratgeber
  1. Workshop CSS: Aufklappbare Elemente
  2. Teil 2: Workshop CSS: Aufklappbare Elemente
  3. Teil 3: Workshop CSS: Aufklappbare Elemente
  4. Teil 4: Workshop CSS: Aufklappbare Elemente
  5. Teil 5: 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
Komprimiert sehen Sie nur noch die Kopf- und Fußzeile der Tabelle.
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.