Faire défiler le texte de la table en fixant l'en-tête

A	B	C	D
1	1	1	1
2	2	2	2
3sfsd	3	3	3
4	4sdfs	4	4
5	5	asdf5	5
6	6	adfdsadf6	6
7	asdf7	7	7
8	8asdfdsf	asdfadf8	8
asd9	asfs9	9	9
11	1	1	1
12	2	2	2
13sfsd	3	3	3
14	4sdfs	4	4
15	5	asdf5	5
16	6	adfdsadf6	6
17	asdf7	7	7
18	8asdfdsf	asdfadf8	8
1asd9	asfs9	9	9
21	1	1	1
22	2	2	2
23sfsd	3	3	3
24	4sdfs	4	4
25	5	asdf5	5
26	6	adfdsadf6	6
27	asdf7	7	7
28	8asdfdsf	asdfadf8	8
2asd9	asfs9	9	9
1	2	3	4

Charger le fichier contenant le html et le css en Version minimale avec toutes les colonnes égales ou en Version avec des colonnes de largeurs différentes

Structure de la table

C'est important que le html sépare le bloc d'en-tête <thead> du corps <tbody> et du pied <tfoot>. Ce sont eux qu'on va faire bouger ou qu'on va fixer.
On donne une classe ou un id à notre table pour bien associer le style à cette table.


<body>

<table class="tableaulong">


<thead>

<tr><th>...</th>...........</tr>

</thead>


<tbody>

<tr><td>...</td>...........</tr>

<tr><td>...</td>...........</tr>

<tr><td>...</td>...........</tr>

</tbody>


<tfoot>

<tr><th>...</th>...........</tr>

</tfoot>


</table>

</body>

Le CSS

Le style va changer les propriétés de la table. Dans une table tout est coordonné automatiquement pour les largeurs des colonnes et les hauteurs des lignes en fonction du contenu. On perd cet avantage quand on fixe les blocs. On devra dire la hauteur des blocs et la largeur des colonnes.


<style>

.tableaulong { margin-bottom:30vh; width:50vw; margin:auto; }


.tableaulong tbody { position:absolute; max-height:20vh; overflow-y: scroll;}

.tableaulong tfoot{ position:absolute; margin-top:20vh; z-index:-1; }

.tableaulong tbody, .tableaulong tfoot {width:50vw;}


.tableaulong td, .tableaulong th { width:25vw; text-align:center;}

.tableaulong tbody, .tableaulong tfoot{border-top:solid 1px;}

</style>

On laisse la table dans le flux. On lui donne une marge en bas qui va dégager la place pour le tableau. Les éléments qui suivent la table seront repoussés après la marge du bas. La hauteur de la marge du bas, c'est la hauteur du tableau. On fixe la largeur de la table. On peut faire cela en pixels ou en relatif à la dimension de la fenêtre à partir de css3, vh pour la hauteur, vw pour la largeur.

On positionne le tbody en haut en absolu. Il se cale sur le haut de la table juste en dessous du thead qui reste dans le flux avec la table. On donne la hauteur du tbody. C'est un peu moins que pour la marge basse de la table si on tient compte de la légende caption. On lui donne la possibilité de bouger verticalement avec le overflow-y.

On positionne le tfoot en haut en absolu. Il se cale sur le haut de la table juste en dessous du thead. On le fait passer derrière avec z-index si le fond n'est pas transparent. Pour laisser de la place au tbody, on donne au tfoot une marge haute égale à la hauteur du tbody.

Ces trois éléments servent à les rendre mobiles les uns par rapport aux autres. Il faut maintenant fixer les largeurs qui ne sont plus dépendantes de la table.

La largeur du thead est héritée de la largeur de la table. On donne la même largeur pour le tbody et le tfoot qui ont perdu leur dépendance à la table.

Finalement, on fixe la largeur des colonnes td ou th et on centre le texte pour tout aligner. Une petite bordure pour séparer le tbody et le tfoot permet de mieux voir la zone de défilement.

Expertise

Acheter en ligne

On peut décorer un peu plus. Il faut faire attention aux marges, aux bordures, à l'écartement entre les cellules du tableau.

Quelques accents en html
Car	Html	en français	En Anglais
â	â	a minuscule accent circonflexe	small a, circumflex accent
à	à	a minuscule accent grave	small a, grave accent
é	é	e minuscule accent aigu	small e, acute accent
ê	ê	e minuscule accent circonflexe	small e, circumflex accent
è	è	e minuscule accent grave	small e, grave accent
ë	ë	e minuscule tréma	small e, dieresis or umlaut mark
î	î	i minuscule accent circonflexe	small i, circumflex accent
ï	ï	i minuscule tréma	small i, dieresis or umlaut mark
ô	ô	o minuscule accent circonflexe	small o, circumflex accent
œ	&oelig;	o e minuscule liés	small o e diphthong (ligature)
û	û	u minuscule accent circonflexe	small u, circumflex accent
ù	ù	u minuscule accent grave	small u, grave accent
ü	ü	u minuscule tréma	small u, dieresis or umlaut mark
ç	ç	c cedille minuscule	small c, cedilla
<	<	inférieur à	less than
>	>	supérieur à	greater than
ß	ß	sz minuscule lié Allemand	small sharp s, German (sz ligature)
ø	ø	o minuscule rayé	small o, slash
Ω	Ω	Omega en grec grand O	Omega
Ð	Ð	inférieur à	capital Eth, Icelandic
Ø	Ø	O majuscule rayé	capital O, slash
Þ	Þ	THORN majuscule Islandais	Þ capital THORN, Icelandic
þ	þ	thorn minuscule Islandais	small thorn, Icelandic
Å	Å	a majuscule anneau	capital a, ring
Car	Html	en français	En Anglais