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>/* 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 */
}