Scrollbar d'un tableau un peu complexe

Bonjour,

je vais essayé d'être le plus clair possible ! Voila j'ai un tableau qui va avoir en données et en noms de colonnes des valeurs différentes (Affichage d'une requête vers une base de donnée). Il faut pour ce tableau que la première ligne soit fixe mais qu'il soit possible de scroller à l'horizontale et verticale toutes les données (donc utilisation de deux tableaux différents impossible).

Actuellement je suis proche du but, le seul probleme que je rencontre c'est que mon scrollbar vertical s affiche uniquement lorsque je scroll tout à droite (je reste encore clair ? :lol:)

Je sais pas si ¸a peut aider mais voici mon html (J'ai pas mal trifouiller dedans donc pas tres propre :s) :

Code:

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
46
47
48
			<div id="scrollbar" style="overflow-x: auto; overflow-y: hidden; height: 380px; width: 70%;">
 
				<table id="small-rounded-corner" style="margin-top: 10px;">
				    <thead style= "width: 100px;">
				    	<tr>
				    		<th scope="col" class="first">O</th>
				        	<th scope="col"><div class="sortArrow">A</div></th>
				            <th scope="col"><div class="sortArrow">B</div></th>
				            <th scope="col"><div class="sortArrow">C</div></th>
				            <th scope="col"><div class="sortArrow">D</div></th>
				            <th scope="col"><div class="sortArrow">E</div></th>
				            <th scope="col"><div class="sortArrow">F</div></th>
				            <th scope="col"><div class="sortArrow">G</div></th>
				            <th scope="col" class="last">...</th>
				        </tr>
				    </thead>
 
				    <tbody>
				        <tr>
				    		<td>bbbbbbbbbbb</td>
				        	<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
				            <td>bbbbbbbbbbb</td>
				            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
				            <td>bbbbbbbbbbb</td>
				            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
				            <td></td>
				            <td></td>
				            <td></td>
				        </tr>
 
				        <tr>
				    	<td></td>
				        <td></td>
				        <td></td>
				        <td></td>
				        <td></td>
				        <td></td>
				        <td></td>
				        <td></td>
				        <td></td>
				        </tr>
 
				        <tr><td colspan="9">&nbsp</td></tr>
				        <tr><td colspan="9">&nbsp</td></tr>
 
				    </tbody>
				</table>
			</div>

Si vous avez des questions allez y ! ;)

Merci

EDIT: Il doit être possible de scroller horizontalement le label des colonnes

Bonjour,

Citation:

Il faut pour ce tableau que la première ligne soit fixe mais qu'il soit possible de scroller à l'horizontale et verticale toutes les données (donc utilisation de deux tableaux différents impossible).

je dirais au contraire dans ce cas les données de la ligne fixe n'étant pas liées aux autres données il faut deux tableaux différents.

PS : pas sûr d'avoir compris malgré tout!

Désolé je ne mettais pas très bien exprimé.

Je voulais dire que la première ligne correspond au nom de mes colonnes donc doit être en mouvement avec le reste.

Finalement j'ai trouvé la solution à mon problème en passant par jqGrid.

Voici un lien vers un exemple de démonstration, cet outils est vraiment très performant !