Archives de l’auteur : Tripollite

[HTML] Tableau scrollé à en-têtes fixes

Bonjour,

Nous allons étudier un cas simple, un tableau avec plusieurs colonnes dont la hauteur est fixe et dont le contenu doit pouvoir défiler.

<table>
	<thead>
	<tr>
		<th>header1</th>
		<th>header2</th>
		<th>header3</th>
		<th>header4</th>
		<th>header5</th>
		<th>header6</th>
		<th>header7</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>1azdad</td>
		<td>2a</td>
		<td>azdazdazdaz dzad azd azd azd az</td>
		<td></td>
		<td>azdazdazdzadaz</td>
		<td>az dzad azd zad zad zadzad </td>
		<td>7</td>
	</tr>
	</tbody>
</table>

Rien d’extravagant.

La première des astuces va être de mettre le tableau dans un div, table avec une hauteur 100% et le div avec une hauteur de 100% également.
Mais pourquoi ?! Les table ne supportent pas la propriété CSS overflow du coup si nous voulons une barre de défilement il faut mettre un div autour avec comme CSS
overflow-y:auto; height:100%

<div class="table_scroll">
<div class="header_table"></div>
<div class="div_table">
<table>
	<thead>
	<tr>
		<th><div class="h">header1</div></th>
		<th><div class="h">header2</div></th>
		<th><div class="h">header3</div></th>
		<th><div class="h">header4</div></th>
		<th><div class="h">header5</div></th>
		<th><div class="h">header6</div></th>
		<th><div class="h">header7</div></th>
	</tr>
	</thead>
	<thead>
	<tr>
		<th><div class="hh">header1</div></th>
		<th><div class="hh">header2</div></th>
		<th><div class="hh">header3</div></th>
		<th><div class="hh">header4</div></th>
		<th><div class="hh">header5</div></th>
		<th><div class="hh">header6</div></th>
		<th><div class="hh">header7</div></th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>1azdad</td>
		<td>2a</td>
		<td>azdazdazdaz dzad azd azd azd az</td>
		<td></td>
		<td>azdazdazdzadaz</td>
		<td>az dzad azd zad zad zadzad dzadad za dzad za</td>
		<td>7</td>
	</tr>
	</tbody>
</table>
</div>
</div>

un tout petit peu de CSS pour agrémenter tout cela :

/* reset CSS */
table, td ,th{ border:1px solid red;}
th, tr{ padding:0; margin:0; border:0;}
table{  width:100%; border-collapse: collapse;}

.table_scroll{ position:relative; padding-top:20px; height:250px; overflow:hidden;}
.table_scroll .header_table{ position:absolute; top:0px; background:blue; height:20px;}
.table_scroll .div_table{ overflow-y:auto; height:100%}

.h{ position:absolute; top:0;padding-left: 5px;margin-left: -5px;}
.hh{ height:0px; visibility:hidden;}

Maintenant les explications :

On met un padding à ce « table_scroll » afin de pouvoir loger le header fixe à cette place.
Le « table_scroll » est en « relative » pour que nous puissions mettre les div avec la class « h » en « absolute » et qu’ils restent à l’intérieur de celui-ci.
En les mettant en « absolute » le table va perdre leur dimension ( et ainsi changer la largeur des colonnes ) on rajoute donc un deuxième « thead » identique mais avec une « height » de 0px et une « visibility » hidden, les colonnes sont à la bonne largeur et le thead est bien au dessus de mon table.
Une petite dose d’overflow-y:auto sur le div contenant le table et le tour est joué.
Le div header_table permet de mettre un background à notre thead.

On peut le faire beaucoup plus joliment avec des sélecteurs CSS, des :before, etc, mais là nous avons le mérite de fonctionner sur presque tous les navigateurs.

DEMO