Position Klebrig und Tabelle-Header

0
39

Sie können nicht position: sticky; ein <thead>. Noch ein <tr>. Aber Sie können sticky <th>, was bedeutet, dass Sie machen können, klebrig-Header innerhalb einer regelmäßigen ol’ <table>. Dies ist schwierig, Sachen, weil, wenn Sie nicht wissen, diese komische Marotte, wäre es schwer zu tadeln Sie. Es macht mehr Sinn, zu klebrig, ein übergeordnetes element wie in der Kopfzeile der Tabelle, anstatt jedes individiaul element in einer Zeile.

Das Problem reduziert sich auf die Tatsache, dass die Klebrigkeit benötigt position: relative arbeiten, und das gilt nicht für <thead> und <tr> in der CSS-2.1-Spezifikation.

Es gibt zwei sehr extreme Reaktionen auf diese, sollten Sie implementieren müssen, um sticky-table-Header und nicht bewusst sein, die <th> workaround.

  • Nicht verwenden, Tabellen-markup-Code überhaupt. Stattdessen, verwenden Sie verschiedene Elemente (<div>s und so weiter) und andere CSS-layout-Methoden zu replizieren den Stil der Tabelle, aber nicht gesperrt werden, mit position: relative und die Schaffung von position: sticky übergeordneten Elemente.
  • Die Verwendung von Tabellen-Elementen, aber völlig zu entfernen, alle Ihre styling-Standardwerte mit neuen display-Werte.

Die erste ist gefährlich, weil Sie sich nicht mit semantischen und zugänglichen Elemente für den Inhalt gelesen und navigiert werden. Das zweite ist fast das gleiche. Sie können diesen Weg gehen, aber Sie müssen wirklich vorsichtig sein, erneut bewerben semantischen Rollen.

Jedenfalls keine, die wichtig ist, wenn Sie nur kleben (get it?!) mit einen sticky Wert auf die <th> – Elemente.

Siehe Stift
Sticky-Table-Header mit CSS von Chris Coyier (@chriscoyier)
auf CodePen.

Es ist wahrscheinlich ein bisschen seltsam, haben Tabellenkopf als Zeile in der Mitte ein Tisch, aber es ist nur zur Veranschaulichung der Idee. Ich war vorstellen, farbigen header bars trennen die Spieler auf verschiedenen Sport-teams oder so etwas.

Immer wenn ich denke, über die Daten-Tabellen, ich denke auch darüber, wie schwierig es sein kann, machen Sie zu reagieren. Glücklicherweise gibt es eine Vielzahl von Möglichkeiten, die alle je auf dem besten Weg zur Gruppe und erkunden Sie die Daten, die in Ihnen.