Discussion :

[SalutToutLeMonde]

Bonjour, je souhaiterais afficher mes tableaux l'un à côté de l'autre, pour l'instant ils sont l'un en dessous de l'autre, mes tableaux sont fait en jQuery :

Code javascript :

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
$(document).ready(function() {
 
	$("body").append("<p>Ressource 1</p>");
 
	var table = $("<table/>");
	table.attr("id", "liste");
	$("body").append(table);
 
	var head = $("<tr><th>Heure</th><th>Vues</th></tr>");
	table.append(head);
 
	var tr = $("<tr/>");
	table.append(tr);
 
	var td = $("<td/>");
	tr.append(td);
 
	var td2 = $("<td/>");
	tr.append(td2);
 
	$.getJSON("http://localhost:3000/getData", function(data_json) {
	$.each(data_json, function(k,v){
	if(k="Ressource 1"){ 
	var span = $("<span/>");
	span
		.append(v.values[0].axis)
		.append("<br/>")
		.append(v.values[1].axis)
		.append("<br/>")
		.append(v.values[2].axis)
		.append("<br/>")
		.append(v.values[3].axis)
		.append("<br/>")
		.append(v.values[4].axis)
		.append("<br/>")
		.append(v.values[5].axis)
		.append("<br/>")
		.append(v.values[6].axis)
		.append("<br/>")
		.append(v.values[7].axis)
	td.append(span);
 
	span = $("<span/>");
	span
		.append(v.values[0].value)
		.append("<br/>")
		.append(v.values[1].value)
		.append("<br/>")
		.append(v.values[2].value)
		.append("<br/>")
		.append(v.values[3].value)
		.append("<br/>")
		.append(v.values[4].value)
		.append("<br/>")
		.append(v.values[5].value)
		.append("<br/>")
		.append(v.values[6].value)
		.append("<br/>")
		.append(v.values[7].value)
	td2.append(span);
	return false;
	}
	});
});
});
 
$(document).ready(function() {
 
	$("body").append("<p>Ressource 2</p>");
 
	var table = $("<table/>");
	table.attr("id", "liste");
	$("body").append(table);
 
	var head = $("<tr><th>Heure</th><th>Vues</th></tr>");
	table.append(head);
 
	var tr = $("<tr/>");
	table.append(tr);
 
	var td = $("<td/>");
	tr.append(td);
 
	var td2 = $("<td/>");
	tr.append(td2);
 
	$.getJSON("http://localhost:3000/getData", function(data_json) {
	$.each(data_json, function(k,v){
	if(k="Ressource 2"){ 
	var span = $("<span/>");
	span
		.append(v.values[0].axis)
		.append("<br/>")
		.append(v.values[1].axis)
		.append("<br/>")
		.append(v.values[2].axis)
		.append("<br/>")
		.append(v.values[3].axis)
		.append("<br/>")
		.append(v.values[4].axis)
		.append("<br/>")
		.append(v.values[5].axis)
		.append("<br/>")
		.append(v.values[6].axis)
		.append("<br/>")
		.append(v.values[7].axis)
	td.append(span);
 
	span = $("<span/>");
	span
		.append(v.values[0].value)
		.append("<br/>")
		.append(v.values[1].value)
		.append("<br/>")
		.append(v.values[2].value)
		.append("<br/>")
		.append(v.values[3].value)
		.append("<br/>")
		.append(v.values[4].value)
		.append("<br/>")
		.append(v.values[5].value)
		.append("<br/>")
		.append(v.values[6].value)
		.append("<br/>")
		.append(v.values[7].value)
	td2.append(span);
	return false;
	}
	});
});
});

Et mon 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
19
20
21
22
23
24
25
26
27
28
table{
	border-width:1px;
	border-style:solid;
	width:200px;
	margin:auto;
	border-color:grey;
	box-shadow: 10px 10px 5px grey;
}
 
td{
	border-width:1px;
	border-style:solid;
	border-color:grey;
	width:50px;	
}
 
th{
	border-width:1px;
	border-style:solid;
	border-color:grey;
	width:50px;	
	color:grey;
}
 
tr{
	font-size:15px;	
	/*background-color:#D0D9D8;*/
}

Du coup pour le moment j'obtiens ça :



Voilà, si quelqu'un saurait quoi rajouter dans le css pour qu'ils soient l'un à côté de l'autre.

[AlashaH]

Plop !

Je te propose de regarder ce JsFiddle : ICI !

C'est une façon de faire parmi tant d'autre (et certainement pas la meilleure).

Regarde les commentaires dans le CSS. Si tu ne comprends pas, dit le moi.


Attention, dans le html, entre les 2 "table", j'ai mis un commentaire html vide pour régler un soucis avec le display:inline-block .


Cordialement,

AlashaH

[SalutToutLeMonde]

Yop,

Merci pour ta réponse, ça marche bien pour ce que j'avais demandé, j'ai juste galéré un peu à mettre les div dans mon jQuery, mais je suis pas très doué.

Par contre, c'est censé marcher pareil si on a plus que 2 tableaux ?

Parce que si j'en rajoute un j'obtiens ça :



En ayant mis la même div sur le dernier tableau .

[AlashaH]

Alors, si tu veux plus de tableau, il faut changer la width du ".container". Exemple avec 3 "table" ici.

Calcul de la largeur du conteneur :
([width_table] x [nbr_de_table]) + (2 x [nbr_de_table] x [margin_table])
= (200 x 3) + (2 x 3 x 10)
= 600 + 60
= 660px

C'est plus clair ?

Et comme je ne fais pas assez attention , une solution beaucoup plus simple : ici ; Marchera très bien, peut importe le nombre de table.

[SalutToutLeMonde]

Impec .

Je prends ta deuxième solution du coup yep. Merci pour l'aide .