Position Sticky And Table Headers

Sie können position: sticky; nicht für ein <thead> verwenden. Auch nicht für eine <tr>. Aber Sie können eine <th> "sticky" machen, was bedeutet, dass Sie tatsächlich Sticky-Header innerhalb einer ganz normalen <table> erstellen können. Das ist knifflig, denn wenn Sie diesen seltsamen Eigenheit nicht kennen würden, könnten Sie es Ihnen schwer verzeihen. Es ist viel sinnvoller, ein übergeordnetes Element wie die Tabellenüberschrift "sticky" zu machen, anstatt jedes einzelne Element in einer Zeile.

Das Problem liegt darin, dass für "Stickiness" position: relative erforderlich ist, und das <thead> und <tr> gemäß der CSS 2.1-Spezifikation nicht anwendbar ist (gilt nicht für <thead> und <tr>).

Es gibt zwei extreme Reaktionen darauf, falls Sie "sticky" Tabellenüberschriften implementieren müssen und die <th>-Umgehung nicht kennen.

Verwenden Sie überhaupt keine Tabellen-Markup. Verwenden Sie stattdessen andere Elemente (<div>s und ähnliches) und andere CSS-Layout-Methoden, um den Stil einer Tabelle zu replizieren, aber Sie sind nicht daran gehindert, position: relative zu verwenden und position: sticky-Eltern-Elemente zu erstellen.
Verwenden Sie Tabellen-Elemente, aber entfernen Sie alle ihre Standardstile komplett mit neuen display-Werten.

Der erste Ansatz ist gefährlich, weil Sie keine semantischen und zugänglichen Elemente für die Inhalte verwenden, die gelesen und navigiert werden sollen. Der zweite ist fast derselbe. Sie können diesen Weg gehen, müssen aber wirklich vorsichtig sein, semantische Rollen neu anzuwenden.

Aber all das spielt keine Rolle, wenn Sie sich einfach (verstehen Sie den Witz?!) daran halten, den Wert sticky auf diese <th>-Elemente anzuwenden.

Siehe den Pen
Sticky Table Headers with CSS von Chris Coyier (@chriscoyier)
auf CodePen.

Es ist wahrscheinlich etwas seltsam, Tabellenüberschriften als Zeile mitten in einer Tabelle zu haben, aber es illustriert nur die Idee. Ich stellte mir farbige Kopfzeilen vor, die Spieler auf verschiedenen Sportmannschaften trennen oder so etwas.

Immer wenn ich an Datentabellen denke, denke ich auch daran, wie knifflig es sein kann, sie responsiv zu gestalten. Glücklicherweise gibt es eine Vielzahl von Möglichkeiten, je nachdem, wie die Daten am besten gruppiert und erkundet werden können.

Kommentare

Azhima

# 12. Juli 2019

Mein alter cukpu sucht nach einem Plugin, das Tabellen wie diese unterstützt. Weil ich Excel verwendet habe

MaxArt

# 13. Juli 2019

Eine Erinnerung, Leute: vergessen Sie nicht, ein scope-Attribut zu Ihren th-Elementen hinzuzufügen.
Definieren Sie auch eine top- (oder bottom-) Eigenschaft für die "sticky" Elemente (ich kann nicht zählen, wie oft ich nicht verstehen konnte, warum es nicht funktioniert hat ‍♂️).

# 13. Juli 2019

Großartig. Jetzt, wenn man die erste Spalte "sticky" machen könnte ;O)

Heinz

# 13. Juli 2019

Hier ist meine Lösung, sie kann auch die erste Spalte "sticky" machen.

Ich kopiere Teile von outerHTML verschiedener Tabellenelemente und füge sie in innerHTML von "sticky" Tabellenelementen ein. Die Quelle der Demo ist auf GIT https://github.com/napengam/sticky
und eine Demo zur Visualisierung des Effekts finden Sie hier http://hgsweb.de/sticky/html/index.html

Grüße

Matt

Permalink zum Kommentar# 29. Juli 2019

Ich musste das für die Arbeit tun. Ich hatte eine Tabelle mit einer beliebigen Anzahl (von 5 bis über 30) von Spalten. Sie wollten, dass die Überschrift "sticky" ist und die erste Spalte "sticky". Der einzige Weg, wie ich es zum Laufen brachte, war, 4 Tabellen zu kombinieren und sie wie eine aussehen zu lassen. Die "Tabellenüberschrift" war tatsächlich zwei Tabellen in einem Div mit overflow hidden. Wenn es einen horizontalen Scroll gab, musste ich die nicht "sticky" Tabelle der Spalten in die entgegengesetzte Richtung des Scrolls verschieben, um den horizontalen Scroll zu fälschen. Die zweiten Tabellensätze befanden sich unter der "Tabellenüberschrift" mit einer Mindesthöhe von 60vh. Das ließ es so aussehen, als wäre die Überschrift "sticky", aber sie scrollte nur, was wie die "Tabellenzeilen" aussah. Wieder musste ich die Verschiebung für die eine "sticky" Spalte beim Scrollen nur in der Y-Achse anpassen. Es war eine Qual zu machen, und nachdem sie monatelang genehmigt und im Beta-Stadium war, mochten die Projektbesitzer plötzlich nicht mehr, dass die Tabelle ihren eigenen vertikalen Scroll hatte und konnten sich nicht einmal mehr daran erinnern, wie sehr sie diese erste "sticky" Spalte wollten. Seufz.

Richard Fitzjohn

# 14. Juli 2019

Für die erste Option könnten Sie andere Elemente verwenden und ARIA verwenden, um die Semantiken und Rollen anzuwenden. Hier ist ein Beispiel – https://www.w3.org/TR/wai-aria-practices/examples/table/table.html.

Diese Technik hat Vor- und Nachteile und sollte gründlich getestet werden, aber die Option besteht. Dies wäre auch viel einfacher responsiv zu gestalten.

MarkC

# 16. Juli 2019

Das funktioniert okay für zellen ohne Rahmen, aber es gibt verschiedene Browserprobleme mit "sticky" <th> mit Rahmen, insbesondere mit border-collapse:collapse. Die beste Umgehung, die ich gefunden habe, ist die Verwendung von border-collapse:separate mit border-spacing:0 und dann nur die Rahmen auf zwei Seiten (z.B. oben/links) von jeder <th> und <td> zu setzen.

Edge hat andere Probleme. Dies hinzuzufügen hilft, aber die Rahmen verschwinden immer noch hinter dem Inhalt beim Scrollen

@supports (-ms-ime-align: auto) {
  background-clip: padding-box;
}

Die Browserhersteller müssen sich wirklich zusammenraufen und uns erlauben, "sticky" mit <thead> zu verwenden – verdammt nochmal die Spezifikation – und sicherstellen, dass die Rahmen ordentlich funktionieren, wenn sie es tun!

David Millar

# 16. Juli 2019

Gute Übersicht, wie man diesen Look erreicht.

Ich bin neugierig, ob es Tricks gibt, um mit transluzenten Objekten umzugehen, die eine "sticky" Positionierung verwenden. Ich habe in früheren Projekten festgestellt, dass alle Header unter (oder in einigen Fällen über) dem zuletzt "sticky" gewordenen Header "sticky" bleiben. Ich habe die Transluzenz verdunkelt, und das bot einen akzeptablen Kontrast, um das Durchscheinen von Text von unten zu verhindern, sah aber immer noch ungelenk aus und machte den box-shadow um den Header herum sehr intensiv. Vielleicht so etwas wie sticky-displace mit den Optionen over, under und push?

Tony

# 1. August 2019

Gibt es eine Pseudo-Klasse, wenn der Header "sticky" ist? Es wäre schön, wenn wir CSS verwenden könnten, um den box-shadow nur dann hinzuzufügen, wenn er "sticky" ist.

Raja

# 3. September 2019

Vielen Dank, Mann, du hast mir buchstäblich den Job gerettet!!

Ross

# 13. September 2019

Sie können position: sticky; nicht für ein <thead> verwenden

Funktioniert in Firefox!

Steven Sproat

# 18. September 2019

Sie müssen auch eine Höhe angeben, damit dies funktioniert. Ich habe die max-height-Eigenschaft verwendet.

harsha v naik

# 20. September 2019

"sticky" funktioniert nicht, wenn ich overflow-x: auto auf den Tabellencontainer gebe

Dinesh

# 9. Oktober 2019

Hallo Chris, danke für den Artikel. Was soll ich tun, wenn ich zwei Header habe, die oben "sticky" sind – einer unter dem anderen. Anwendungsfall: Der erste Header hat statische Werte, aber der 2. Header (unter dem ersten Header) hat Werte, die wir auf alle Zeilen anwenden könnten – wie ein Dropdown-Menü, eine Checkbox (zum Auswählen aller Zeilen), Eingabewerte. Einfach ausgedrückt, der 2. Header ist wie eine "Alle anwenden"-Funktion für eine Spalte. Wie macht man diese beiden Header-Zeilen oben "sticky", wenn der Rest der Tabelle scrollbar ist.

Bala

# 16. Oktober 2019

Gute Arbeit! Es ist eine gute Lösung für einfache Anwendungen

Dennis

# 12. Januar 2022

Wie kann man die ersten beiden oberen Zeilen "sticky" machen?

Ravinder Pal

# 2. Februar 2022

Es funktioniert nicht im Safari Browser Version 15

Stefan

# 25. März 2022

Ich habe meine so gemacht, dass die thead-Überschriften oben "sticky" sind und die tbody-Überschriften die anderen tbody-Überschriften verdecken.

    th {
        background: #242424;
        position: sticky;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }

    thead tr th {
        /* Don't forget this, required for the stickiness */
        top: 0;
    }

    tbody tr th {
        /* Don't forget this, required for the stickiness */
        top: 1.5em;
    }

mit

    <table>
        <thead>
            <tr><th>Column 1</th><th>Column 2</th><th>Columnm3</th><tr>
        </thead>
        <tbody>
            <tr><th colspan=3>Sticky Header 1</th></tr>
            <tr><td>Row 1</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 2</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 3</td><td>Data A</td><td>Data B</td>
            <tr><th colspan=3>Sticky Header 2</th></tr>
            <tr><td>Row 4</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 5</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 6</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 7</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 5</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 6</td><td>Data A</td><td>Data B</td>
            <tr><th colspan=3>Sticky Header 2</th></tr>
            <tr><td>Row 4</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 5</td><td>Data A</td><td>Data B</td>
            <tr><td>Row 6</td><td>Data A</td><td>Data B</td>
        </tbody>
    </table>

Wenn Sie beide "sticky" Elemente ersetzen möchten, könnten Sie der tr eine Klasse geben, um zu unterscheiden, welche es ist.

    tr.first th {
        /* Don't forget this, required for the stickiness */
        top: 0;
    }

    tr.second th {
        /* Don't forget this, required for the stickiness */
        top: 1.5em;
    }

Beispiel https://codepen.io/stephen-george-west/pen/rNpjXYL

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.