Tableau scrollable avec colonne gauche fixe

**Issiel** · 12/06/2012, 10h30

Bonjour à tous. Je me tourne vers vous après avoir écumer le web sans trouver la perle rare...

Je suis à la recherche d'une solution à une demande de mon patron. En général, pas de problèmes pour m'en sortir en html/css mais cette fois-ci je coince. J'ai trouvé quelques solutions qui ne sont absolument pas viables.

J'ai donc un tableau de données. Certaines de ces données peuvent être fusionnée et la tailler des données est très variables. Comme je peux avoir énormément de données et donc de colonnes, j'ai besoin de pouvoir scroll le tableau de manière à coller la dernière colonne à la colonne de gauche qui elle contient les libellés de données.

J'ai trouvé des solutions qui visaient à avoir plusieurs <div> et plusieurs tableaux mais cela n'est pas viable étant donné que les lignes peuvent être de taille variables. Voila voila je suis pas mal dans une impasse actuellement. Au niveau du code je n'ai rien d'autre qu'un tableau basique avec des cellules qui peuvent être fusionnée à l'horizontale. En revanche pas de rowspan.

Je vous transmet tout de même le code. Je remercie d'avance ceux qui chercheront à m'aider à résoudre mon problème.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<html>
<head>
	<style type="text/css">
                .conteneurTotal {
                        width:1025px;
                        margin: auto;
                        padding: 15px;
                        border: 1px solid #0275A0;
                        position:relative;
                }
 
                .conteneurTableau {
                        overflow-x : scroll; 
                        margin-left: 65px;
                        width:400px;
                }
 
                /* Mon tableau */
                .tableau {
                        border:1px solid #000000;
                        border-collapse:collapse;
                        width:700px;
                        text-align:center;
                }
                .tableau td {
                        border :1px solid #CCCCCC;
                }
        </style>
</head>
<body>
	<div class="conteneurTotal">
		<div class="conteneurTableau">
			<table class="tableau">
				<tbody>
					<tr><td>Lib1</td><td>Val1<br/>Val2</td><td>Val3</td><td>Val4</td><td>Val5</td></tr>
					<tr><td>Lib2</td><td>Val1<br/>Val2<br/>Val2.2<br/>Val2.3</td><td>Val3</td><td>Val4</td><td>Val5</td></tr>
					<tr><td>Lib3</td><td>Val1<br/>Val2</td><td>Val3</td><td>Val4</td><td>Val5</td></tr>
					<tr><td>Lib4</td><td>Val1<br/>Val2</td><td>Val3</td><td>Val4</td><td>Val5</td></tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

**Meloooo** · 12/06/2012, 11h58

Salut,
Tiens regarde par la :
http://www.developpez.net/forums/d23...-colonne-fixe/

Ca ressemble à quelque chose près à ton souci !

**Issiel** · 12/06/2012, 13h50

Merci mais j'étais tombé dessus. En effet ça y ressemble mais ca ne correspond pas.
Explications :
Si j'ai un texte trop long dans un des td d'entête, le reste de la colonne ne s'élargit pas. Si j'ai des retours à la ligne dans le contenu d'une cellule, la hauteur de ligne ne suit pas.

Dans ce tableau nous avons en réalité plusieurs tableaux et donc on perd les liens entre les données et leur libellé.

**Meloooo** · 12/06/2012, 14h33

Je suis tombée sur un plugin Jquery (DataTables) qui te permet de faire ca :
http://www.datatables.net/release-da...mns/index.html
Qu'en penses-tu ?

**Issiel** · 12/06/2012, 14h42

Je vous remercie pour cette réponse pour le moins intéressante. Je vais creuser ça et vous tenir au courant. Apparemment le seul manque serait la hauteur de ligne qui ne se met pas à jour en temps réel dans le cas d'une modification mais je pourrai toujours tenter d'y intégrer une petite fonction qui s'en occuperait. Si jamais quelqu'un d'autre a de bonnes idées, je suis preneur mais je pense qu'avec celle-ci c'est bien parti.

Tableau scrollable avec colonne gauche fixe

HTML

Vue hybride

Discussions similaires

Partager

Partager