Discussion :

[Dams59]

Bonjour,
je suis sur le développement d'une page web et j'aimerais mettre une scrollbar horizontale sur une table mais en laissant la 1ere colonne figée.
J'ai fais des recherches sur le net mais je n'ai trouvé que la solution pour figer la première ligne. J'ai également trouvé un moyen de figer la ligne et la colonne mais c'est en javascript et j'essaie d'éviter.
Si cela est possible, merci de me dire comment procéder.

Dams59

[nezdeboeuf62]

Bonjour,
je suis sur le développement d'une page web et j'aimerais mettre une scrollbar horizontale sur une table mais en laissant la 1ere colonne figée.
J'ai fais des recherches sur le net mais je n'ai trouvé que la solution pour figer la première ligne. J'ai également trouvé un moyen de figer la ligne et la colonne mais c'est en javascript et j'essaie d'éviter.
Si cela est possible, merci de me dire comment procéder.

Dams59

bah techniquement parlant ca doit pas être possible... surtout sans Javascript...

ce que tu peux essayer c'est de séparer ton tableau dans 2 <iframe>. dans la premiere tu mets ta premiere colonne, et dans la seconde tu mets le reste, et tu joues sur le positionnement et les bordures pour que ce soit invisible... mais je pense que ca va te creer d'autre soucis au niveau du scrolling vertical.

[radimby]

Si sans Javascript, ce n'est possible que sous Firefox, en utilisant un CSS, sinon, pour que ça soit compatible sous IE, il faut utiliser du js, c inévitable.

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
table.scrollable>tbody		{ height:130px; overflow:auto; overflow-x:hidden; }

Code HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<table class="scrollable" id="table1">
	<thead>
		<tr>
			<th>Col 1</th>
			<th>Col 2</th>
			<th>Col 3</th>
		</tr>
	</thead>
	<tbody>
          <tr>
              <td>line 11</td>
              <td>line 12</td>
              <td>line 13</td>
          </tr>
          <tr>
              <td>line 21</td>
              <td>line 22</td>
              <td>line 23</td>
          </tr>
           .......
          <tr>
              <td>line n1</td>
              <td>line n2</td>
              <td>line n3</td>
          </tr>
        </tbody>
</table>

[Dams59]

Ok, l'application étant destinée aux entreprises, je ne peux pas me permettre de faire quelque chose de fonctionnel uniquement sous Firefox tant que les gens n'auront pas ouvert les yeux et bani définitivement IE ...

Sinon pour ceux que ça intéresse, la double scroll dont je parlais est ici