Tableau avec une ligne d'en-tête et une colonne fixe

par **heddicmi** » 22 nov. 2006, 17:50

Youpida !

Ze solution is here !

<html>
<head>
<style>
.general
{
	position: absolute;

	overflow: hidden;

	width: 400px;
	height: 200px;

	border: 1px solid;
}

.titre
{
	position: absolute;

	top: 0px;
	left: 0px;

	width: 100px;
	height: 50px;

	background-color: #99CCCC;
}

.entete_l
{
	position: absolute;

	left: 100px;
	top: 0px;

	height: 50px;

	background-color: #99CCCC;
}

.entete_c
{
	position: absolute;

	top: 50px;
	left: 0px;

	width: 100px;

	background-color: #CCCCFF;
}

.donnees
{
	position: absolute;
	overflow: scroll;

	left: 100px;
	top: 50px;

	width: 300px;
	height: 150px;

	background-color: #9999CC;
}
</style>

<script type="text/javascript">
function doOnScroll(mondiv)
{
document.getElementById("colonne").style.top=(50-mondiv.scrollTop)+"px"
document.getElementById("ligne").style.left=(100-mondiv.scrollLeft)+"px"
}
</script>
</head>

<body>
<div class="general">
	<div style="z-index:100;" class="titre">
		<table width=100 height=50 border=1>
			<tr>
				<td width=100>Titre</td>
			</tr>
		</table>
	</div>
	<div style="z-index:10;" id="ligne" class="entete_l">
		<table width=500 height=50 border=1>
			<tr>
				<td width=100>Alpha</td>
				<td width=100>Beta</td>
				<td width=100>Gamma</td>
				<td width=100>Omega</td>
				<td width=100>Upsilon</td>
			</tr>
		</table>
	</div>
	<div style="z-index:10;" id="colonne" class="entete_c">
		<table width=100 height=200 border=1>
			<tr height=50>
				<td>Ligne 1</td>
			</tr>
			<tr height=50>
				<td>Ligne 2</td>
			</tr>
			<tr height=50>
				<td>Ligne 3</td>
			</tr>
			<tr height=50>
				<td>Ligne 4</td>
			</tr>
		</table>
	</div>
	<div style="z-index:10;" class="donnees" onscroll="doOnScroll(this);">
		<table width=500 height=200 border=1>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>

et un exemple concret.

par **heddicmi** » 22 nov. 2006, 15:49

Comme sur developpez.com, ce sujet semble avoir du mal à attirer les foules

Je tiens à vous laisser mes dernières avancés sur ce sujet en consultant ce message :

Changement de politique. Je suis repartis de 0...

Bien m'en a pris. trotters213, j'avais déjà consulté ce tableau qui ne m'avait pas convaincu.

Cependant, il m'a permis de retrouver une propriété scrolltop. Celle-ci permet de savoir de combien on a descendu la barre de défillement.

De ce fait, je me suis basé là dessus pour finir avec cette solution plutôt pas mal est répondant totalement à ma demande : La solution

Le principe donc :
Un gros div, avec une propriété cachant tout ce qui en dépasse.
A l'intérieur 4 autres div représentant chacun une partie du tableau (cellule centrale en haut à gauche, titre des colonnes, titre des lignes, données).
Chacun de ces divs contient un tableau avec les infos adéquats. Celui des données à une propriétés de scroll pour tout ce qui en dépasse.

Le div contenant les données réagis sur le onscroll afin de fournir, aux deux divs représentant les en-têtes de lignes et de colonnes, les nouvelles position par rapport au top et au left respectivent.

Bon, dit comme ça, c'est un peu pompeux.
En voici le code :

<html>
<head>
<style>
.general
{
	position: absolute;

	overflow: hidden;

	width: 400px;
	height:200px;

	border: 1px solid;
}

.titre
{
	width: 400px;
	height: 50px;

	background-color: #99CCCC;
}

.entete_l
{
	position: absolute;

	left: 100px;
	top: 0px;

	height: 50px;

	background-color: #99CCCC;
}

.entete_c
{
	position: absolute;

	top: 50px;
	left: 0px;

	width: 100px;

	background-color: #CCCCFF;
}

.donnees
{
	position: absolute;
	overflow: scroll;

	left: 100px;
	top: 50px;

	width: 300px;
	height: 150px;

	background-color: #9999CC;
}
</style>

<script type="text/javascript">
function doOnScroll(mondiv)
{
document.getElementById("colonne").style.top=(50-mondiv.scrollTop)+"px"
document.getElementById("ligne").style.left=(100-mondiv.scrollLeft)+"px"
}
</script>
</head>

<body>
<div class="general">
	<div z-index=1 class="titre">
		<table width=100 height=50 border=1>
			<tr>
				<td width=100>Titre</td>
			</tr>
		</table>
	</div>
	<div z-index=2 id="ligne" class="entete_l">
		<table width=500 height=50 border=1>
			<tr>
				<td width=100>Alpha</td>
				<td width=100>Beta</td>
				<td width=100>Gamma</td>
				<td width=100>Omega</td>
				<td width=100>Upsilon</td>
			</tr>
		</table>
	</div>
	<div z-index=1 id="colonne" class="entete_c">
		<table width=100 height=200 border=1>
			<tr height=50>
				<td>Ligne 1</td>
			</tr>
			<tr height=50>
				<td>Ligne 2</td>
			</tr>
			<tr height=50>
				<td>Ligne 3</td>
			</tr>
			<tr height=50>
				<td>Ligne 4</td>
			</tr>
		</table>
	</div>
	<div class="donnees" onscroll="doOnScroll(this);">
		<table width=500 height=200 border=1>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
			<tr height=50>
				<td width=100>1</td>
				<td width=100>2</td>
				<td width=100>3</td>
				<td width=100>4</td>
				<td width=100>5</td>
			</tr>
		</table>
	</div>
</div>
</body>

Maintenant, c'est pas parfait, loin de là...

Et la principale, c'est bien évidement (vous l'aurez remarqué en testant) :
Le div en haut à gauche reste tout en dessous. Je n'ai toujours pas trouvé comment le faire passer au dessus. ainsi les 2 div d'en-têtes glisseront en dessosu et disparaitront.

Et le 2nd défaut, c'est que celà ne marche pas sous opera. J'aurais plutôt cru netscape, mais non.

Donc ça fonctionne sous FF, IE et Netscape.

Voilà, si vous avez une solution pour mon autre problème, je susi preneur !

Merci !

par **heddicmi** » 17 nov. 2006, 11:27

Bonjour à tous !

Je recontre des soucis actuellement. Ce que je souhaite, c'est pouvoir réaliser nu tableau html pour lequel une ligne (voir plusieurs) sera figé en haut, ainsi qu'une colonne à gauche : Une sorte de tableau à la tableur...

Je suis reparti d'une source permettant de fixer un ligne d'en-tête.

A partir de la, je comprends le principe de manipulation qui nous amène à deux divs, dont on se sert pour caler la 1ère ligne.

Lorsque je tente d'appliquer la même stratégie pour bloquer en même temps une colonne, c'est la catastrophe, je n'arrive à rien. Mon niveau le plus avancé était :
Mettre en place le tableau quasi formaté, avec les deux barres de défilement (horizontale et verticale). Mais je me buttais sur un truc con : Les barres de défilement était indisponible (certainement sous le calque global).

Pour l'instant, j'en suis donc resté, sans soucis à faire çà.

Si vous avez des indications sur comment bloquer la colonne "Ligne", je suis preneur !

Queslques codes de ma page :

<html>
<body>
	<link rel="stylesheet" href="tableau_fixe.css">
</body>

<head>
	<div class="outerframe">
		<div class="innerframe">
			<table>
				<tr class="heads">
					<th>Ligne</th>

					<th>Alpha</th>
					<th>Beta</th>
					<th>Gamma</th>
					<th>Delta</th>
					<th>Epsilon</th>
					<th>Zeta</th>

				</tr>
				<tr>
					<td>1</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>

					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>2</td>
					<td>234.56</td>
					<td>345.67</td>

					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>3</td>

					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>

				</tr>
				<tr>
					<td>4</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>

					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>5</td>
					<td>234.56</td>
					<td>345.67</td>

					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>6</td>

					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>

				</tr>
				<tr>
					<td>7</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>

					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>8</td>
					<td>234.56</td>
					<td>345.67</td>

					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>
				</tr>
				<tr>
					<td>9</td>

					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>
					<td>234.56</td>
					<td>345.67</td>

				</tr>
				<tr>
					<td>10</td>
					<td>234.56</td>
					<td>345.67</td>
					<td>456.78</td>
					<td>456.78</td>

					<td>234.56</td>
					<td>345.67</td>
				</tr>
			</table>
		</div><!-- innerframe -->
	</div><!-- outerframe -->
</head>
</html>

Et le CSS qui gère le tout :

/*		fixedtableheads.css		*/


/*===================================*/
/* fixed table heads demo */
/*===================================*/

/* this element contains the entire table structure */
.outerframe
{
	position: relative;		/* to capture the absolutely positioned col heads */
	padding-top: 23px;		/* space for the col heads */

	/* arbitrary position of the structure on the page */
	margin: 25px;

	/* optional: width matches innerframe */
	width: 739px;
}

/* this enables the table to scroll without scrolling the page */
.innerframe
{
	position: static;	/* 'static' is the default position, but I've defined it explicitly to expose the logic: if it were relative or absolute this element would contain the col heads instead of releasing them to outerframe */

	overflow: scroll;	/* required */
	height: 200px;		/* height is required, its value arbitrary */
	width: 739px;		/* arbitrary, wide enough to contain the table */

	padding-left: 1px;	/* Mozilla hides the table's left border unless this is here */
}

.innerframe table
{
	position: static;	/* 'static' is the default position, but I've defined it explicitly to expose the logic: if it were relative or absolute this element would contain the col heads instead of releasing them to outerframe */

	/* optional */
	border-collapse: collapse;
}

.innerframe th,
.innerframe td
{
	width: 100px;			/* col heads must match with data columns; they don't have to all be the same width, but they must be fixed */
	
	border: 1px solid black;	/* optional */
}

/* position the row of column heads above the table */
.innerframe tr.heads
{
	position: absolute;		/* this throws the col heads out of the table and out of the innerframe, where they'll be captured inside the innerframe */
	top: 0px;
	left: 1px;	/* shift col heads right to match the innerframe's padding-left above */
}

Merci à vous !

Tableau avec une ligne d'en-tête et une colonne fixe

Répondre

Étendre la vue Revue du sujet : Tableau avec une ligne d'en-tête et une colonne fixe

Tableau avec une ligne d'en-tête et une colonne fixe