Position Klibbiga och tabellrubrikerna

0
46

Du kan inte position: klibbiga; a <thead>. Eller en <tr>. Men du kan klibbiga en <th>, vilket innebär att du kan göra klibbiga rubriker inne i en vanlig ol’ <table>. Detta är knepiga saker, för om du inte visste detta konstiga sarkasm, det skulle vara svårt att klandra dig. Det gör mycket mer meningsfullt att sticky ett överordnat element som tabellrubriken snarare än varje individiaul element i rad.

Frågan kokar ner till det faktum att klibbighet kräver position: relative att arbeta och som inte tillämpas på <thead> och <tr> i CSS 2.1 spec.

Det finns två mycket extrema reaktioner på detta, bör du behöver för att genomföra klibbiga rubriker bord och inte vara medveten om <th> lösning.

  • Använd inte tabell markup alls. Istället använder olika element (<div>s och whatnot) och andra CSS-layout metoder för att kopiera stilen på ett bord, men inte låst av att använda position: relative och skapa position: sticky överordnade element.
  • Använd tabellen element, men att helt ta bort alla deras styling standard med ny display värden.

Den första är farligt eftersom du inte använder semantiska och tillgängliga element för innehållet för att kunna läsa och navigera. Den andra är nästan samma. Du kan gå den vägen, men måste vara riktigt noga med att åter tillämpa semantiska roller.

Hur som helst, ingen av att frågor om ni bara hålla (få det?) att använda en klibbig värde på <th> – element.

Se Pennan
Sticky Rubriker Bord med CSS genom att Chris Coyier (@chriscoyier)
på CodePen.

Det är nog lite konstigt att tabellen har rubriker som i en rad i mitten på ett bord, men det är bara illustrerar en idé. Jag inbillar färgade header barer som skiljer spelare på olika idrottslag eller något.

När jag tänker på tabeller, jag tycker också om hur knepigt det kan vara att göra dem mottagliga. Lyckligtvis finns det en mängd olika sätt, allt beroende på de bästa sätt att gruppera och utforska data i dem.