Html 2 tableaux sur 1 page:pb taille <td>

moYa -  
 moYa -
Bonjour,

J'ai 2 tableaux sur ma page:
- le premier représentt en fait mon entête (situé dans un div avec un scroll horizontale)
- le second tableau est mon corps du tableau que je fais défiler verticalement. (l'entête reste visible tout le temps).

Ce que je n'arrive pas à faire c'est d'avoir les taille de mes cellules des 2 tableaux identiques.
Les 2 tableaux font la même largeur et les cellules <td> ont aussi les même largeur dans l'entête et dans le corps seulement lorsque ma page s'affiche, les cellules n'ont pas du tout le même taille.

illustration:
Page.php
...
//tableau des entêtes.
<table style="width:900px">
<tr >
<td >nom article</td>
</tr>
</table>
//tableau des valeur.


<table style="width:900px">
<tr >
<td >pomme</td>
</tr>
</table>

Dans mon fichier.css
td {
width:150px;
}

Merci de m'aider si vous avez une petite idée de comment faire.
Merci
A voir également:

5 réponses

Réponse 1 / 5
olimix
 
il faudrai que tu utilise un seule tableau.
Au lieu de mettre ton premier tableau dans une div tu met la div scrollable dans ce tableau
0
moYa
 
Merci de ta réponse.
J'ai essayé mais cela ne fonctionne pas si j'utilise 1 seul tableau.
Justement, j'avais un seul tableau au départ puis j'ai du le divisier en 2 pour pouvoir scroller verticalement sans que l'entête scroll aussi (mais pouvoir scroller les 2 tableau horizontalement).
Chaque tableau est dans un div.
J'ai essayé de mettre les div dans le tableau mais cela ne fonctionne plus du tout . Il n'y a plus aucun scroll.
Etant donnée que je ne suis pas une experte je ne sais pas trop si je dois suivre une syntaxe particulière. Tu pourrais être plus précis quand au fait de metttre les div dans le tableau?
Moi j'ai fait cça (cela ne fonctionne pas:

<table>
<div ... width="900px; overflow:scroll;">
<tr><td><td>
</tr>
</div>
</table>

<table>
<div ... width="900px; height=700px;overflow:auto;">
<tr><td><td>
</tr>
</div>
</table>

Merci .
0
Réponse 2 / 5
olimix
 
^^
ca risque pas de fonctionner vu le double problème que tu as
1 - problème de balisage (le div ne peux pas chevaucher les balises du tableau)
2 - mauvaise syntaxe css (on met les parametres de la div dans un style="parametres")

la syntaxe glabal est : <element style="parametre1:valeur; parametre2:valeur2;"></element>
oubli pas les points-virgules

essaye ca et dis moi si c'est bien ce que tu veux car je suis pas sur d'avoir saisie tout ce que tu veux faire .

<table>

<tr><td><div style="height:100px; width:900px; overflow:scroll;">ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br></div><td>
</tr>

</table>

<table>
<div style="height:700px; width:900px; overflow:scroll;">ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br>ok<br></div>
<tr><td><td>
</tr>
</div>
</table>
0
moYa
 
u_u' ! désolée . j'ai mal recopié dans mon commentaire précédent.
J'ai bien écris les div comme cela :
<div id="principal" style="width: 80%px; overflow:scroll;"> (pour le premier)
<div id="principal" style="width: 80%px; height:700px;overflow:auto;"> (pour le second)

Merci pour la remarque. Ensuite , j'ai bien compris ton exemple mais je n'ai pas qu'une seule cellule <td> dans mon entête. J'en ai fait qu'une seule pour simplifier mais j'en ai plusieurs. Alors est ce que encapsuler mon div dans mes cellules <td> est la bonne solution ?
Mercii pour ton aide !
0
olimix
 
<div id="principal" style="width: 80%px; overflow:scroll;"> (pour le premier)
<div id="principal" style="width: 80%px; height:700px;overflow:auto;"> (pour le second)

c'est soit % soit px , pas les 2
0
Réponse 3 / 5
moYa
 
en fait je précise :

Mon entête est horizontale (mais je veux pouvoir la scroller de la gauche vers la droite car mon tableau est plus grand que mon cadre )

Le corps de mon tableau lui doit être scrollable dans les 2 sens: horizontale car lui aussi sera trop grand et lorsque je le scroll verticalement je veux que j'entête reste visible.
0
Réponse 4 / 5
olimix
 
ok bein il suffit de fixer uniquement la largeur de ta premiere div
et de fixer largeur et hauteur pour la 2eme

Apres pour ton pb de largeur de cellule :
Les cellules sont redimensionnées en fonction du texte qu'elles contiennes donc il faut fixer une largeur de cellule et s'assurer que les mot qu'elles contiennes ne la fasse pas se redimensionner ( au pire réduire la police )

<div style="overflow:scroll; width:200px;" id="header">
<table width="500px" border="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
</tr>

</table>
</div>
<div style="overflow:scroll; height:200px; width:200px;" id="content">
<table width="500px" border="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
</tr>
</table>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
moYa
 
Après plusieurs essai et de tirage de cheveux ..
J'ai trouver une page qui explique vraiment ce que je voulais faire et comment le faire.
JE transmet l'info au cas ou n_n !
==> Voilà .
http://blog.oxagile.com/2009/10/26/scrollable-html-table-with-fixed-header-for-ie-7-ie-8-firefox-35-chrome/

merci
0