Figer simplement une ligne de tableau

**Biotik** · 02/07/2010, 04h56

Bonjour à tous,

Actuellement j'essaie de coder un tableau de base de données en XHTML. Seulement comme les données sont nombreuses et volumineuses (il y a des photos par exemple), la taille du tableau est très grande verticalement.

Aussi, j'aimerais figer une ou plusieurs lignes en haut de ce tableau pour pouvoir comparer facilement chaque ligne avec l'entête, exactement comme cela se fait (très facilement) sous Excel. Mais j'aimerais pouvoir faire cela sans être obligé de créer deux tableaux distincts (dans deux "div" par exemple) car je me retrouve alors avec des problèmes de largeur de colonnes à fixer.

J'ai déjà consulté de nombreux exemples dans d'autres forums mais ces derniers étant assez complexes, j'ai dû tout modifier pour au final obtenir un code qui ne fonctionnait pas, notamment à cause de la grandeur du tableau et de la largeur des colonnes dures à fixer manuellement.

Voici comment se présente le code de mon tableau :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<title>Results for data 1</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="code_design.css" />
	</head>
	<body>
		<table>
                        /* début des lignes a figer */
			<tr>
				<th>Photo</th>
				<th colspan="5">Nom</th>
				<th>truc...</th>
                                <th>truc...</th> /* plein de colonnes */
			</tr>
			<tr>
				<td><img src="file:///chemin_image"</td>
				<td colspan="5">Acronychia pedunculata</td>
				<td>0</td>
				<td>1</td>
				<td>1</td>
				<td>etc...</td> /* plein de colonnes */
                        </tr>
			<tr>
				<td colspan="26"; class="separateur"></td>
			</tr>
                         /* fin des lignes a figer */
			<tr>
				<th>Photo</th>
				<th>Rang</th>
				<th>Similarité</th>
				<th>etc...</th> /*encore plein de colonnes */
			</tr>
                        /* et là plein de lignes de données */
			<tr>
				<td><img src="file:///..."</td>
				<td>1</td>
				<td>99.1172%</td>
				<td>Diptbour</td>
				<td>Dipterocarpus bourdilloni</td>
				<td>DIPTEROCARPACEAE</td>
				<td>etc...</td> /*plein de colonnes */
			</tr>
			<tr>
				<td><img src="file:///..."</td>
				<td>2</td>
				<td>95.9872%</td>
				<td>Acropedu</td>
				<td>Acronychia pedunculata</td>
				<td>RUTACEAE</td>
				<td>0</td>
				<td>etc...</td> /*plein de colonnes */
			</tr>
                        etc...
 
/* CSS */
 
body {font-family:Verdana,serif; font-size:0.7em;}
 
table {border-collapse:collapse;}
 
td {border:1px solid black; text-align:center; vertical-align:middle; width:1000em}
 
th {border:1px solid black; text-align:center; vertical-align:middle; width:1000em}
 
img {width:50%;}
 
.separateur {background-color:gray; height:1em;}

Si quelqu'un a une solution je suis 100% preneur, car vu que je n'arrive pas à traiter ce problème avec des DIV, je pense passer aux FRAMES (même si c'est pas bien... =S)