Associer deux colonnes de deux tableaux html différents

**clementdevelop** · 10/05/2013, 14h56

Bonjour à tous,
Je cible mon problème: Je crée 2 tableaux dans une page php qui va chercher des données dans une BDD.
1 tableau est pour le titre des colonnes des données (tableau entête)
Le 2ème tableau contient les données (tableau data)
Je cherche à ce que les noms des colonnes (dans mon tableau entête) soient affichés juste au-dessus de mes données correspondantes.

J'ai déjà essayé de fixer les largeurs de mes colonnes (tableau 1 et 2) mais cela ne marche pas.
Connaissez-vous une autre solution? Est-il possible d'associer une cellule du tableau 1 à une colonne du tableau 2 (data)?

Merci d'avance pour vos réponses...

Voici un petit aperçus peut-être que vous comprendrez mieux mon problème...
Nom : affichage_developpez.jpg
Affichages : 80
Taille : 91,0 Ko

Nom : affichage_developpez.jpg
Affichages : 80
Taille : 91,0 Ko

Nom : affichage2_developpez.jpg
Affichages : 71
Taille : 32,6 Ko

Le code correspondant:

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">     
<html>
<head>
<style type="text/css">
a:link{color:blue}
a:hover{color:blue}
a:visited{color:blue}
.ligne_rouge {
background-color: #FF0000;
}
.ligne_grise {
background-color: #BBBBBB;
}
.ligne_blanche {
background-color: #EFEFEF;
}
lign_or {
background-color: #FFD700;
}
td.colonneps{width:105;}
td.colonnedep{width:105;}
td.colonnegdo{width:95;}
td.colonnecom{width:135;}
td.colonneeap{width:80px;}
td.colonnendp{width:130px;}
td.colonnenaff{width:85px;}
td.colonnechaff{width:110px;}
td.colonneipt{width:50px;}
td.colonnerr{width:60px;}
td.colonnepaff{width:95px;}
td.colonnebloc{width:65px;}
td.colonnecomment{width:70px;}
td.colonneprg{width:50px;}
td.colonnemexp{width:60px;}
td.colonnemexr{width:60px;}
td.colonnemes{width:60px;}
td.colonnemodifsch{width:85px;}
 
th.enteteps{width:115;}
th.entetedep{width:105;}
th.entetegdo{width:95;}
th.entetecom{width:135;}
th.enteteeap{width:80;}
th.entetendp{width:130;}
th.entetenaff{width:85px;}
th.entetechaff{width:110px;}
th.enteteipt{width:50px;}
th.enteterr{width:60px;}
th.entetepaff{width:95px;}
th.entetebloc{width:65px;}
th.entetecomment{width:70px;}
th.enteteprg{width:50px;}
th.entetemexp{width:60px;}
th.entetemexr{width:60px;}
th.entetemes{width:60px;}
th.entetemodifsch{width:85px;}
</style>
<title>Affichage Tableau Orne</title>
</head>
<body>
<form name="rechercher" action="suivi_omt_orne2.php" method="POST">
<?php
 
//=========================================
// information pour la connection à la DB
//=========================================
$host = 'xxx';
$user = 'xxx';
$pass = 'xxx';
$db = 'xxx';
 
//======================
// connection à la DB
//======================
        $link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
        mysql_select_db($db) or die ('Erreur :'.mysql_error());
 
//=============================================================================
// requête SQL qui compte le nombre total d'enregistrement dans la table et qui
//récupère tous les enregistrements
//=============================================================================
        $select = 'SELECT * FROM suivi_omt_orne ORDER BY poste_source ASC';
        
        $result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );
        
        $total = mysql_num_rows($result);
 
//===========================================
// si on a récupéré un résultat on l'affiche.
//===========================================
if($total) {
        //==================
        // debut du tableau
        //==================
        
        echo '<table border="2" bordercolor="#000000" rules=none width="1450">'."\n";
        
        //======================================================================
        // première ligne on affiche les titres prénom et surnom dans 2 colonnes
        //======================================================================
        echo '<tr>';
        echo '*Les Postes Sources sont affichés par ordre alphabétique        / ' . "\n";
        echo '*Nombre de postes: ' . $total;
        echo '  / <a href="http://xxxxxxxxxx/acrbn/suivi_omt/suivi_general_omt.html">Page d\'accueil</a>';
        echo '</tr>';
 
        echo '<tr>';
        echo '<th bgcolor="deepskyblue"><b>Rechercher Poste Source:</b></td>';
        echo '<th><input type="text" name="poste_source" size="20"/></td>';
        echo '<th colspan="1"><input type="submit" value="valider" size="20"></td>';
        echo '</tr>';   
 
 
        echo '<tr>';
        echo '<th class="enteteps" bgcolor="#FFD700">Poste Source</th>';
        echo '<th class="entetedep" bgcolor="#FFD700">Départ</th>';
        echo '<th class="entetegdo" bgcolor="#FFD700">N° GDO</th>';
        echo '<th class="entetecom" bgcolor="#FFD700">Commune</th>';
        echo '<th class="enteteeap" bgcolor="#FFD700">Equipement à poser</th>';
        echo '<th class="entetendp" bgcolor="#FFD700">Nom de poste</th>';
        echo '<th class="entetenaff" bgcolor="#FFD700">N° affaire</th>';
        echo '<th class="entetechaff" bgcolor="#FFD700">Chargé affaire</th>';
        echo '<th class="enteteipt" bgcolor="#FFD700">IPT</th>';
        echo '<th class="enteterr" bgcolor="#FFD700">Radio ou RTC</th>';
        echo '<th class="entetepaff" bgcolor="#FFD700">Position affaire</th>';
        echo '<th class="entetebloc" bgcolor="#FFD700">Blocage</th>';
        echo '<th class="entetecomment" bgcolor="#FFD700">Commentaires</th>';
        echo '<th class="enteteprg" bgcolor="#FFD700">Programme</th>';
        echo '<th class="entetemexp" bgcolor="#FFD700">MEX prévue</th>';
        echo '<th class="entetemexr" bgcolor="#FFD700">MEX réelle</th>';
        echo '<th class="entetemes" bgcolor="#FFD700">Mise en service</th>';
        echo '<th class="entetemodifsch" bgcolor="#FFD700">Modification schéma exploitation</th>';
        echo '</tr>'."\n";
        echo '</table>'."\n";
 
        echo '<div style=" height:399px; width:1465px; border:solid blue 1px; overflow:scroll;">'."\n";
        echo '<table border="4" bordercolor="#000000" rules=none>'."\n";
   
        //=========================================================================
        // lecture et affichage des résultats sur 2 colonnes, 1 résultat par ligne. 
        //=========================================================================
   
        while($row = mysql_fetch_array($result)) {
 
switch ($row["position_affaire"]) {
   case '11-Ouvrage en Exploitation' :
       $ligne_class = 'ligne_grise';
   break;
 
   case 'Affaire bloquée' :
       $ligne_class = 'ligne_rouge';
   break;
 
   default:
      $ligne_class = 'ligne_blanche';
   break;
}
       
        echo '<tr class="' . $ligne_class . '">';
        echo '<td>'.$row["poste_source"].'</td>';
        echo '<td>'.$row["depart"].'</td>';
        echo '<td>'.$row["num_gdo_poste_a_equiper"].'</td>';
        echo '<td>'.$row["commune"].'</td>';
        echo '<td>'.$row["equipement_a_poser"].'</td>';
        echo '<td>'.$row["nom_de_poste"].'</td>';
        echo '<td>'.$row["num_affaire"].'</td>';
        echo '<td>'.$row["charge_affaire"].'</td>';
        echo '<td>'.$row["ipt"].'</td>';
        echo '<td>'.$row["radio_ou_rtc"].'</td>';
        echo '<td>'.$row["position_affaire"].'</td>';
        echo '<td>'.$row["blocage"].'</td>';
        echo '<td>'.$row["commentaires"].'</td>';
        echo '<td>'.$row["prg"].'</td>';
        echo '<td>'.$row["mex_prevue"].'</td>';
        echo '<td>'.$row["mex_reelle"].'</td>';
        echo '<td>'.$row["mise_en_service"].'</td>';
        echo '<td class="colonnemodifsch">'.$row["modification_schema_exploitation"].'</td>';
        echo '</tr>'."\n";
 
 
    }
    echo '</table>'."\n";
    echo '</div>'."\n";
 
        //================
        // fin du tableau.
        //================
}
else echo 'Pas d\'enregistrements dans cette table...';
 
// on libère le résultat
mysql_free_result($result);
mysql_close($link);
 
?>
</form>
</body>
</html>

**grumff** · 10/05/2013, 19h37

Mets un attribut css "table-layout: fixed" sur tes tables, et si ça ne suffit pas ajoute des min-width et max-width sur tes colonnes...

Mais dans ton cas le plus logique serait encore de tout mettre dans le même tableau.

**clementdevelop** · 13/05/2013, 08h51

C'est exactement ca qu'il me fallait ! J'avais les min-width et maw-width mais il me manquait le table-layout!

Et non je suis obligé de faire deux tableaux pour des raisons d'ergonomie.

Justement avant j'avais 1 seul tableau, donc aucun problème, mais comme il y a beaucoup de données à afficher, au bout d'un moment on ne voit plus l'entête de mon tableau, donc on ne sait plus où on est...

D'où l'obligation de faire deux tableaux; pour que le tableau 1 (les entêtes) soit fixes!

Merci =)

**grumff** · 16/05/2013, 01h20

Je me demande si t'aurais pas qd même moyen de faire un seul tableau en mettant tes en-têtes dans un thead et en mettant une hauteur fixe et un overflow:auto sur le tbody dans lequel tu placerais le reste. Ça me paraitrait plus propre si tous les browsers actuels supportent ça.

**CCyrillus** · 18/05/2013, 19h13

+1
Voici un exemple : http://dabblet.com/gist/5467859 , ceci devrait fonctionner à partir de IE8.
Il y a surement plein d''autre exemple sur le net.

Associer deux colonnes de deux tableaux html différents

HTML

Vue hybride

Discussions similaires

Partager

Partager