Astuce Tableau

 

Astuces CSS - Tableau défilant

Faire défiler un tableau sans les en-têtes.

Lorsqu'il s'agit d'afficher un grand tableau, le défilement de la page risque de faire disparaître les titres. Il sera alors difficile de se repérer entre les colonnes. Nous vous proposons ici quelques lignes de CSS pour formater le tableau, mais surtout pour permettre le défilement de la partie centrale uniquement. Autrement dit pour afficher le tableau comme ci-dessous.

Le principe est de fixer la hauteur du corps du tableau (tbody) en rendant invisible le contenu au delà de cette hauteur. Pour que cela fonctionne il faut changer le type d'affichage en block. de toutes les sections du tableau. Pour l'esthétique, nous avons ajouté un coloriage une ligne sur deux.

Principales nouveautés de CSS3
Propriétés	Flex	Grid	Anim	Transform
animation			X
animation-delay			X
animation-direction			X
animation-duration			X
animation-fill-mode			X
animation-iteration-count			X
animation-name			X
animation-play-state			X
animation-timing-function			X
transition			X
transition-delay			X
transition-duration			X
transition-property			X
transition-timing-function			X
align-content	X	X
align-items	X	X
align-self	X	X
display	X
flex	X
flex-basis	X
flex-direction	X
flex-flow	X
flex-grow	X
flex-shrink	X
flex-wrap	X
justify-content	X	X
order	X
align-content	X	X
align-items	X	X
align-self	X	X
grid		X
grid-area		X
grid-auto-columns		X
grid-auto-flow		X
grid-auto-rows		X
grid-column		X
grid-column-end		X
grid-column-gap		X
grid-column-start		X
grid-gap		X
grid-row		X
grid-row-end		X
grid-row-gap		X
grid-row-start		X
grid-template		X
grid-template-areas		X
grid-template-columns		X
grid-template-rows		X
justify-content	X	X
justify-items		X
justify-self		X
backface-visibility				X
perspective				X
perspective-origin				X
transform				X
transform-origin				X
transform-style				X
	17	28	14	6

Autre solution : sticky.

Dans cette deuxième solution le corps du tableau conserve sa hauteur complète mais les titres (section thead) sont en position sticky, ce qui veut dire qu'ils défileront jusqu'à buter sur le haut de l'écran, sans disparaître par le haut.

Principales nouveautés de CSS3
Propriétés	Flex	Grid	Anim	Transform
animation			X
animation-delay			X
animation-direction			X
animation-duration			X
animation-fill-mode			X
animation-iteration-count			X
animation-name			X
animation-play-state			X
animation-timing-function			X
transition			X
transition-delay			X
transition-duration			X
transition-property			X
transition-timing-function			X
align-content	X	X
align-items	X	X
align-self	X	X
display	X
flex	X
flex-basis	X
flex-direction	X
flex-flow	X
flex-grow	X
flex-shrink	X
flex-wrap	X
justify-content	X	X
order	X
align-content	X	X
align-items	X	X
align-self	X	X
grid		X
grid-area		X
grid-auto-columns		X
grid-auto-flow		X
grid-auto-rows		X
grid-column		X
grid-column-end		X
grid-column-gap		X
grid-column-start		X
grid-gap		X
grid-row		X
grid-row-end		X
grid-row-gap		X
grid-row-start		X
grid-template		X
grid-template-areas		X
grid-template-columns		X
grid-template-rows		X
justify-content	X	X
justify-items		X
justify-self		X
backface-visibility				X
perspective				X
perspective-origin				X
transform				X
transform-origin				X
transform-style				X
	17	28	14	6