Wikipedia:WikiProjekt Charts und Popmusik/Chartvorlagen/Sticky Head
Einige der Chartvorlagen sind mit der Funktion sticky head ausgestattet. Der optische Effekt bewirkt, dass Tabellenköpfe sich mit dem Bildschirmausschnitt bewegen, wodurch man als Leser den Zusammenhang zwischen Spaltenüberschrift und -inhalt auch bei langen Tabellen nicht mehr so leicht aus den Augen verliert. Die Funktion steht in allen gängigen Browsern zur Verfügung (ausgenommen ältere Browserversionen), die Mobilversionen der Chartvorlagen bleiben davon unberührt.
Automatisch aktiv sind sticky heads in folgenden Fällen (zu Demonstrationszwecken auch in dieser Tabelle):
| Vorlage | Zeilenanzahl |
|---|---|
| Vorlage:Nummer-eins-Hits | > 5 |
| Vorlage:Charttabelle | > 8 |
| Vorlage:Chartplatzierungen | > 20 |
| Vorlage:AfM-Tabelle |
Benutzerseitige Anpassungen
[Quelltext bearbeiten]Um sticky heads auch für „normale“ Tabellen mit der Klasse charts-tableformat (in Diskografien) zu aktivieren, kann der folgenden Code in die eigene common.css geschrieben werden:
@media only screen and (min-width:720px) {
.charts-tableformat {
border-collapse: separate;
border-spacing: 0;
border-bottom-style: none !important;
border-left-style: none !important;
}
.charts-tableformat th, .charts-tableformat td {
border-right-style: none !important;
border-top-style: none !important;
}
}
Um den Effekt für alle gängigen Tabellen im Chartbereich zu aktivieren, unabhängig von der Zeilenanzahl, verwende folgenden Code:
@media only screen and (min-width:720px) {
.charts-table, .charts-tableformat {
border-collapse: separate;
border-spacing: 0;
border-bottom-style: none !important;
border-left-style: none !important;
}
.charts-table th, .charts-tableformat th, .charts-table td, .charts-tableformat td {
border-right-style: none !important;
border-top-style: none !important;
}
}
Um den Effekt schließlich ganz zu deaktivieren, reicht folgende Deklaration:
@media only screen and (min-width:720px) {
.charts-stickyhead th {
position:relative !important;
}
}