Discussion :

[vincent29200]

Bonjour, je suis en train de réaliser une page html dans laquelle est créée une div qui elle-meme contient plusieurs tableaux.
Ces tableaux sont créés dynamiquement avec javascript. Lorsque j'ai commencé, il n'y avait pas beaucoup de tableaux, et celà rentrait dans la div.
Je les pisitionnait comme ceci:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#tableauData0 {
   float:left;
 }

Or maintenant j'ai plus de tableaux et la div devient trop petite...
Je ne peux malheureusement pas agrandir la div...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
--------------------------------
|  ----                        |
|  |   |                       |
|  |   |                       |
|  ----                        |
|                              |
--------------------------------

J'ai dessiné ci dessus un apercu de ce que j'ai. Je n'ai dessiné que 1 tableaux, mais je souhaiterai les aligner par la gauche et que s'il y en a plus que la div ne peut contenir, il y ait une scrollbar qui apparaisse...

Or ce qu'il se passe, c'est que si j'ajoute trop de tableaux, ils viennent se positionner en dessous et non pas sur la meme ligne.

Voici comment j'ai positionné ma div:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 #contenu {
	position: absolute;
	right: 1.3%;
	top: 90px;
	height: 41%;
	width: 77%;
	overflow-x : scroll; 
	white-space:nowrap;					
	}

J'espere que vous comprendrez mon probleme...
Merci pour vos réponses

[ornitho13]

Salut,

pourrais tu mettre également du code html, histoire de voir plus précisément comment sont imbriqués les tableaux?

merci

[polymorphisme]

Bonjour,

tu explique correctement ton soucis,
sache que les utilisateurs n'aiment pas utiliser la barre de déplacement horizontale, d'ailleurs, tu notera qu'elle n'est que très rarement proposée
à l'utilisateur. Après, à toi de voir !

[vincent29200]

Je sais que ca n'est pas très agréable, mais comme la dimensions des colonnes n'est pas fixe car le contenu des cellules vient d'une base de donnée.
Il faut donc que je prévois le cas ou les tableaux dépasseraient la taille de la div.

Mes tableaux sont indépendants les uns des autres, voici leur code html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="contenu"  style="border: 2px pink solid;">
   <tableau id="1">
      <tr><td>contenu1</tr></td>
      <tr><td>contenu2</tr></td>
      <tr><td>contenu3</tr></td>
   </tableau>
 
   <tableau id="2">
      <tr><td>contenu1</tr></td>
      <tr><td>contenu2</tr></td>
      <tr><td>contenu3</tr></td>
   </tableau>
</div>

Mes tableaux sont créés par javascript, mais c'est le code équivalent a ce qui est réalisé.

Merci pour vos réponses

[ornitho13]

Ton code HTML n'est pas bon, tu utilises le tag "<tableau>" mais cela n'existe pas.
Utilise "<table>" c'est la tag pour faire un tableau, de plus les tags de fermeture </td> et </tr> sont inversés ( je pense que c'est une erreur de copier/coller) .

Ensuite utilise une class ou le tag HTML plutôt que l'id pour ton css (garde ton id pour le javascript):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.maTable{
   float:left;
}

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
table{
   float:left;
}

Si j'ai bien compris ta demande, tu veux pouvoir scroller horizontalement. Le probleme de float:left, c'est que dès qu'il a atteint la largeur de son conteneur, il passe a la ligne.
Pour pouvoir le faire, il faut utiliser du javascript et modifier un peu ton html.

Voici un exemple:

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
 
<div id="contenu">
	<div class="conteneurTable">
	   <table id="1">
	      <tr><td>contenu1</td></tr>
	      <tr><td>contenu2</td></tr>
	      <tr><td>contenu3</td></tr>
	   </table>
 
	   <table id="2">
	      <tr><td>contenu1</td></tr>
	      <tr><td>contenu2</td></tr>
	      <tr><td>contenu3</td></tr>
	   </table>
	    <table id="3">
	      <tr><td>contenu1</td></tr>
	      <tr><td>contenu2</td></tr>
	      <tr><td>contenu3</td></tr>
	   </table>
	   <table id="4">
	      <tr><td>contenu1</td></tr>
	      <tr><td>contenu2</td></tr>
	      <tr><td>contenu3</td></tr>
	   </table>
	   <table id="5">
	      <tr><td>contenu1</td></tr>
	      <tr><td>contenu2</td></tr>
	      <tr><td>contenu3</td></tr>
	   </table>
   </div>
</div>

et voici le css:

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
 
#contenu {
	position: absolute;
	right: 1.3%;
	top: 90px;
	height: 41%;
	width: 77%;
	overflow : scroll; 
	white-space:nowrap;
        border: 2px pink solid;				
} 
table{
	float:left;
	width:300px;
}
.conteneurTable{
	overflow:hidden;
}

A partir de là, tu dois modifier dynamiquement (en javascript) la largeur de ".conteneurTable" afin qu'elle soit égale à la largeur de tous tes tableaux réunis.

Ainsi tous tes tableaux seront sur la même ligne et tu pourras scroller verticalement

[vincent29200]

Merci beaucoup pour la réponse, je vais tester ca, j'avais fais une erreur de copié collé, désolé,

Je te donne la réponse! mais merci beaucoup pour l'aide!