Teil 2: Workshop CSS: Aufklappbare Elemente
- Workshop CSS: Aufklappbare Elemente
- Teil 2: Workshop CSS: Aufklappbare Elemente
- Teil 3: Workshop CSS: Aufklappbare Elemente
- Teil 4: Workshop CSS: Aufklappbare Elemente
- 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:...
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.
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.
