blognote-info.com

Voila sujet très largement traité sur internet mais je vais tenter de résumer ...

le principe est simple ... une table, des headers un scroll, on veut que quand on scroll le header ne bouge pas ... ouvrez un tableur quelconque ils fonctionnent tous comme ça ...

Il y a bien cette version qui fait plein de truc superbes ... enfin y'a écris pureCSS mais il ustilise du javascript pour modifier du CSS et grosso modo si tu as pas une table de 756px de large avec 3 colonnes ... il faut que tu modifies plein de chose ... il faut oublier si on cherche a généraliser a tout un site c'est ingérable ...

Il y en a d'autres mais je trouve que de façon générale énormément de gens ont du mal a généraliser ce qu'ils font pour le rendre utilisable et fonctionnel pour tous ...

Perso j'ai une petite methode qui fonctionne sous IE et FF (ce serait si bien si on pouvait simplement faire tbody {overflow:auto} mais bon...)

voici le modèle html :

	<div class="tableHeader">
		<table>
			<tr>
				<th width="25%">Header1</th>
				<th width="25%">Header2</th>
				<th width="25%">Header3</th>
				<th>Header4</th>
			</tr>
		</table>
	</div>
	<div class="tableContent">
		<table>
			<tr>
				<td width="25%">Content1</td>
				<td width="25%">Content1</td>
				<td width="25%">Content1</td>
				<td>Content1</td>
			</tr>
		</table>
	</div>

naturellement il faut absolument mettre du contenu ... je vais pas blinder ma page ;)

table {
	margin:0;
	padding:0;
	border-collapse:collapse;
	width:400px; /* Ici la taille réelle des tables */
}
td,th {
	border:1px solid black;
	font-weight:normal;
}
.tableHeader,.tableContent {
	width:420px; /* ici 20px de plus que le contenu*/
	margin:0;
	padding:0;
}
.tableContent {
	position:relative;
	top:-1px;
	height:300px; /* Ici on définit la hauteur du contenu */
	overflow:auto;
}

Voila ça nécéssite de connaitre la largeur en pixel des tables qu'on utilise mais ça résoud déja pas mal de problèmes ;)

PS : il vous est plus que largement possible de remplace table, td, th dans le css par #monIdTable, #monIdTable td, #monIdTable th de façon a généraliser encore un peu ;)
PS2 : avec cette solution vous définissez a part toutes les fantaisies genre coloration une ligne sur deux, coloration des header, des bordures ...

[Edit 19/10/5]

Voici un exemple