[CSS]Table scrollable avec colonne fixe

NoSmokingJan. 2020

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énom	Nom	Date	Entreprise	Fonction	Adresse	Adresse mail
Christoph	Casbourne	09/13/1957	Services	Tejon Ranch Co	00281 Gina Terrace	ccasbourne0@oracle.com
Truda	Bertelmot	11/11/1985	Accounting	Clipper Realty Inc.	32178 Parkside Center	tbertelmot1@domainmarket.com
Dallon	Goulding	03/16/1977	Research and Development	Goldman Sachs Group, Inc. (The)	1 Prairieview Road	dgoulding2@umn.edu
Yoshiko	Danielsky	07/10/1997	Business Development	FB Financial Corporation	47040 Spenser Road	ydanielsky3@tmall.com
Berte	Dmitrienko	11/17/1995	Marketing	Argan, Inc.	44640 Hoffman Way	bdmitrienko4@nasa.gov
Valentijn	Meadmore	08/02/1993	Human Resources	MGM Resorts International	6 Monica Center	vmeadmore5@ed.gov
Suzy	Flewett	10/25/1980	Research and Development	Ceragon Networks Ltd.	894 Forest Dale Point	sflewett6@icio.us
Mordecai	Jerrams	10/13/1965	Training	Silicom Ltd	2 Hallows Pass	mjerrams7@cnet.com
Claus	Samwyse	11/25/1974	Accounting	Verizon Communications Inc.	38239 Gina Junction	csamwyse8@xing.com
Rafaelia	Pedrol	04/18/1975	Research and Development	Schneider National, Inc.	97 Everett Plaza	rpedrol9@google.es
Lita	Lisimore	06/08/1988	Product Management	Simmons First National Corporation	2081 Birchwood Street	llisimorea@wiley.com
Noak	McPeice	12/06/1974	Product Management	Eyegate Pharmaceuticals, Inc.	7315 Susan Point	nmcpeiceb@discovery.com
Craggy	Portugal	12/18/1989	Sales	Roper Technologies, Inc.	27 Brown Hill	cportugalc@netscape.com
Madelle	Bartoszinski	12/20/1958	Legal	Honeywell International Inc.	13648 Corry Lane	mbartoszinskid@ustream.tv
Frasquito	Harriagn	09/24/1998	Accounting	ASB Bancorp, Inc.	2 2nd Pass	fharriagne@vistaprint.com
Betteann	Freegard	05/05/1954	Marketing	Brookfield Property Partners L.P.	3434 South Pass	bfreegardf@linkedin.com
Jacinda	Sheepy	10/22/1989	Engineering	Landmark Infrastructure Partners LP	21034 Ryan Center	jsheepyg@diigo.com
Sigismund	Arnholtz	09/16/1965	Research and Development	Ellington Residential Mortgage REIT	6 Superior Road	sarnholtzh@vinaora.com
Myrle	Cromack	05/07/1951	Research and Development	First Cash, Inc.	62591 Emmet Drive	mcromacki@networksolutions.com
Zorina	Momford	11/01/1961	Marketing	Cimpress N.V	38 Buell Park	zmomfordj@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

FireFox peut peiner lors du suivi des scrolls, voir Effets liés au défilement sur MDN (web.archive..org) ;
et sûrement bien d'autres.

Ressources

Propriété CSS position sur MDN ;
Compatibilité position:sticky sur caniuse.com.