[CSS]Table scrollable avec colonne fixe

NoSmoking

Et si on oubliait un peu le JavaScript et que l'on adoptait le positionnement sticky pour rendre nos <table> scrollables, bon pour le coup on oublie également IE.

La réalisation d'une <table> scrollable en devient des plus rudimentaire.

Aperçu

PrénomNomDateEntrepriseFonctionAdresseAdresse mail
ChristophCasbourne09/13/1957ServicesTejon Ranch Co00281 Gina Terraceccasbourne0@oracle.com
TrudaBertelmot11/11/1985AccountingClipper Realty Inc.32178 Parkside Centertbertelmot1@domainmarket.com
DallonGoulding03/16/1977Research and DevelopmentGoldman Sachs Group, Inc. (The)1 Prairieview Roaddgoulding2@umn.edu
YoshikoDanielsky07/10/1997Business DevelopmentFB Financial Corporation47040 Spenser Roadydanielsky3@tmall.com
BerteDmitrienko11/17/1995MarketingArgan, Inc.44640 Hoffman Waybdmitrienko4@nasa.gov
ValentijnMeadmore08/02/1993Human ResourcesMGM Resorts International6 Monica Centervmeadmore5@ed.gov
SuzyFlewett10/25/1980Research and DevelopmentCeragon Networks Ltd.894 Forest Dale Pointsflewett6@icio.us
MordecaiJerrams10/13/1965TrainingSilicom Ltd2 Hallows Passmjerrams7@cnet.com
ClausSamwyse11/25/1974AccountingVerizon Communications Inc.38239 Gina Junctioncsamwyse8@xing.com
RafaeliaPedrol04/18/1975Research and DevelopmentSchneider National, Inc.97 Everett Plazarpedrol9@google.es
LitaLisimore06/08/1988Product ManagementSimmons First National Corporation2081 Birchwood Streetllisimorea@wiley.com
NoakMcPeice12/06/1974Product ManagementEyegate Pharmaceuticals, Inc.7315 Susan Pointnmcpeiceb@discovery.com
CraggyPortugal12/18/1989SalesRoper Technologies, Inc.27 Brown Hillcportugalc@netscape.com
MadelleBartoszinski12/20/1958LegalHoneywell International Inc.13648 Corry Lanembartoszinskid@ustream.tv
FrasquitoHarriagn09/24/1998AccountingASB Bancorp, Inc.2 2nd Passfharriagne@vistaprint.com
BetteannFreegard05/05/1954MarketingBrookfield Property Partners L.P.3434 South Passbfreegardf@linkedin.com
JacindaSheepy10/22/1989EngineeringLandmark Infrastructure Partners LP21034 Ryan Centerjsheepyg@diigo.com
SigismundArnholtz09/16/1965Research and DevelopmentEllington Residential Mortgage REIT6 Superior Roadsarnholtzh@vinaora.com
MyrleCromack05/07/1951Research and DevelopmentFirst Cash, Inc.62591 Emmet Drivemcromacki@networksolutions.com
ZorinaMomford11/01/1961MarketingCimpress N.V38 Buell Parkzmomfordj@mysql.com

Structure HTML

La structure utilisée est on ne peut plus standard, il nous faut simplement mettre un conteneur à la <table> pour obliger celle-ci à scroller.

<div class="table-conteneur">
  <table class="table-scrollable">
    <thead>
      <!-- le contenu de l'entête -->
    </thead>
    <tbody>
      <!-- le contenu de la table -->
    </tbody>
  </table>
</div>

CSS pour effet de scroll

C'est surtout la valeur des z-index, l'empilement donc, qui est importante.

Il faut penser à mettre une couleur de fond sur les éléments en position sticky pour qu'ils restent proprement visibles.

Le reste du CSS n'est que cosmétique.

Voilà c'est terminé, pas trop déçu ?

Désagréments

Ressources