Figer l'entête d'un tableau

**cheik_koita** · 19/03/2009, 12h48

salut à tous, j'ai page qui me permet d'afficher les données ma BD sous forme de tableau. le tableau lorsqu'elle s'affiche j'utilise des barres de défilement verticales pour pouvoir voir toutes les lignes. J'aimerai lors du défilement, pouvoir figer l'entête du tableau comme sous excel.
voici le code de la page:

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!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" lang="fr">
<link rel="stylesheet" media="screen" type="text/css" title="fichier" href="fichier.css" />
    <head>
        <title>Faisceaux</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <script>
      function doclick()
      {
      	var elt=document.getElementById("form");
      	elt.submit();
      	}
    </script>
    <body>
    <!-- L'en-tête -->
 
       <div id="en_tete">
       <p><h3>FAISCEAUX</h3></p>
       </div>
<hr/>
       <!-- Le corps -->
<div id="corps">
<form method="post" action="faisceaux.php" id="form">
Veuillez choisir un centre pour voir ces faisceaux :<br/>
<table>
    <tr>
       <td>Centre:</td><td><select name="centre" id="centre">
	          <option value=""></option>
              <option value="1"  >SSP1 ou MSC1</option>
              <option value="2" >SSP2 ou MSC2</option>
			  <option value="3" >MSC3</option>
              </select></td>
			  <td><input type="submit" value="Voir tous les faisceaux" /></td>
	</tr></table>
Recherche par Nom de Faisceau:<br/>
<table>
<tr>
<td>Nom Faisceau:</td><td><input type="text" name="nom_faisceau" /></td><td><img src="images/loupe.png" onclick="doclick()" /></td>
</tr>
</table>
</form>
</div>
<?php
if(isset($_POST['centre']) AND isset($_POST['nom_faisceau']))
{
	$_POST['centre']!="";
	$_POST['nom_faisceau']!="";
	$centre=$_POST['centre'];
	$nom_faisceau=$_POST['nom_faisceau'];
// Maintenant on affiche tous les faisceaux du centre selectionné
// On se connecte d'abord à MySQL :
mysql_connect("localhost", "root", "root");
mysql_select_db("application");
// On utilise la requête suivante pour récupérer les infos sur le faisceau correspondant
$reponse = mysql_query("SELECT ID, Nom_Faisceau_S, Libelle, Point_code_S, Type_Faisceau, Type_reseau, Genre  FROM faisceau WHERE (nom_faisceau_S = '$nom_faisceau') OR  (centre_id = '$centre')" ) or die (mysql_error());
?>
<div id="voir">
<table border="1">
<tr>
 
	<td><b> Nom_Faisceau_Source <b></td>
	<td><b> Libelle <b></td>
	<td><b> Point_Code_S <b></td>
	<td><b> Type_Faisceau <b></td>
	<td><b> Type_Reseau <b></td>
	<td><b> Genre <b></td><b>
</tr>
 
<?php while($data2 = mysql_fetch_assoc($reponse))
   {
   $id=$data2['ID'];
?>
		<tr>
 
		<td><a href="Mic.php?id=<?php echo $data2['ID'];?>"><?php echo $data2['Nom_Faisceau_S'];?></a></td>
		<td><?php echo $data2['Libelle'];?></td>
		<td><?php echo $data2['Point_code_S'];?></td>
		<td><?php echo $data2['Type_Faisceau'];?></td>
		<td><?php echo $data2['Type_reseau'];?></td>
		<td><?php echo $data2['Genre'];?></td>
		</tr>
	<?php }
	//fin du while
// On se déconnecte de MySQL
mysql_close();
}
?>
</table>
</div>
    </body>
</html>

**MaitrePylos** · 19/03/2009, 13h00

Bonjour,

Tu peux faire ça avec des CSS, voici un tuto pour t'expliquez tout.

**cheik_koita** · 19/03/2009, 13h15

Merci bien, mais le lien "http://http//j-willette.developpez.com/tutoriels/css/position-fixed/" ne marche pas.

**MaitrePylos** · 19/03/2009, 13h30

Désolé voici

**romulus1206** · 19/03/2009, 13h35

Tres bon tuto , je ne note pour quand j'aurais perdu d'autres neurones .

l'adresse c'est : http://j-willette.developpez.com/tut...osition-fixed/

**chromo** · 19/03/2009, 13h36

Pas sur que cette solution fonctionne.

Ici la demande est de garder les titres des colonnes dans un tableau fixe. Pas un div sur un page.

Et la je suis preneur pour une solution propre.
Car je ne vois pas 36 solutions,
soit faire 2 tables une avec les titres et une avec le contenu et celle du contenu on la met dans un DIV avec overlow: auto. Mais ca pose des problemes pour les largeurs de colonne car le titre le change pas de largueur si l'autre colonne change.

Sinon avec jQuery c'est aussi jouable, mais toujours un peu tordu.
Et un conseil il serait deja interessant d'utiliser des THEAD et TBODY pour faciliter la chose.

Figer l'entête d'un tableau

PHP & Base de données

Discussions similaires

Partager

Partager