Positie Plakkerig en Tabel Kopteksten

0
44

Je kunt niet position: sticky; een <thead>. Noch een <tr>. Maar u kunt kleverige een <th>, wat betekent dat u kunt maken sticky headers in een gewone ol’ <table>. Dit is een lastige dingen, want als je niet weet dat dit raar gril, is het moeilijk om de schuld van je. Het maakt veel meer zin om te plakkerig een bovenliggend element, zoals de koptekst van de tabel in plaats van elke individiaul element in een rij.

Het probleem komt neer op het feit dat kleefkracht vereist positie: ten opzichte van het werk en dat geldt niet voor de <thead> en <tr> in de CSS 2.1 spec.

Er zijn twee zeer extreme reacties op deze, moet je nodig hebt om te implementeren sticky tabel kopteksten en zich niet bewust is van de <th> oplossing.

  • Gebruik geen tabel-markup is op alle. In plaats daarvan, gebruik maken van verschillende elementen (<div>s en whatnot) en andere CSS-lay-out methoden om te repliceren de stijl van een tabel, maar niet vergrendeld met position: relative en maken position: sticky bovenliggende elementen.
  • Gebruik tabel elementen, maar volledig verwijderen van al hun styling in verzuim is met de nieuwe waarden.

De eerste is gevaarlijk, omdat u niet met behulp van semantische en toegankelijk elementen voor de inhoud te lezen en te navigeren. De tweede is bijna hetzelfde. U kunt gaan die weg, maar je moet echt voorzichtig zijn om opnieuw toepassen van semantische rollen.

Hoe dan ook, geen van die zaken als je gewoon houden (get it?!) om met behulp van een kleverige waarde op die <th> – elementen.

Zie de Pen
Sticky Tabel Kopteksten met CSS door Chris Coyier (@chriscoyier)
op CodePen.

Het is waarschijnlijk een beetje raar om de tabelkopteksten als een rij in het midden van een tafel, maar het is slechts ter illustratie van het idee. Ik dacht gekleurde kop bars scheiden spelers op verschillende sportteams of iets.

Wanneer ik denk over gegevenstabellen, ik denk ook na over hoe lastig het kan zijn om ze te laten reageren. Gelukkig zijn er een verscheidenheid van manieren, afhankelijk van de beste manier om de groep en het verkennen van de gegevens.