Discussion :

[moimp]

Bonjour,

Je voudrais placer 2 tableaux sur une même ligne en les répartissant sur la ligne. Le tableau1 doit être au milieu de la moitié gauche et le tableau2 au milieu de la moitié droite ou bien (plus esthétique) espace de gauche = espace central = espace de droite.
J'ai essayé avec display:table et display:table-cell mais ils se mettent l'un au-dessus de l'autre.
J'ai aussi essayé display:inline-block. C'est mieux mais les tableaux sont juxtaposés.

Voici mon code html

Code html :

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

1
2
3
4
<div class="signes">
	<?php require('tableau1.html'); ?>
	<?php require('tableau2'.html'); ?>
</div>

et mon css

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.signes
{
	display:table;
	text-align:center;
}
.signes table
{
	display:table-cell;
	border-collapse:separate;
	border:1px solid black;
	width:20rem;
	font-size:.9rem;
}

[ProgElecT]

Salut

Erreur Copier/coller <?php require('tableau2'.html'); ?> ?
________________<?php require('tableau2.html'); ?>.

[moimp]

Oui bien sûr! Merci. Lire:

Code php :

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

1
2
<?php require('tableau1.html'); ?>
<?php require('tableau2.html'); ?>

[Invité]

Bonjour,

Code html :

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

1
2
3
4
<div class="signes">
	<div><?php require('tableau1.html'); ?></div>
	<div><?php require('tableau2.html'); ?></div>
</div>

Code css :

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
.signes
{
	display:table;
	width:100%;
}
.signes > div
{
	display:table-cell;
	width:50%;
	vertical-align:top;
}
.signes > div > table
{
	border-collapse:collapse;
	max-width:20rem;
	font-size:0.9rem;
	margin:0 auto;
}
.signes > div > table td
{
	border:1px solid black;
  padding:5px;
}

[Invité]

Ou avec flexbox :

Code html :

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

1
2
3
4
<div class="signes">
	<?php require('tableau1.html'); ?>
	<?php require('tableau2.html'); ?>
</div>

Code css :

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
.signes
{
	display:-webkit-flex; display:flex;
	flex-direction: row;
	justify-content:space-around;
}
.signes > table
{
	border-collapse:collapse;
	max-width:20rem;
	font-size:0.9rem;
}
.signes > table td
{
	border:1px solid black;
	padding:5px;
}

[moimp]

Bonjour et merci.

Pour pouvoir centrer les tableaux dans leur div parents, j'ai du ajouter un inline-block dans le css des tableaux comme ceci:

Code css :

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

1
2
3
4
5
6
7
8
.signes > div > table
{
	display:inline-block;
	border-collapse:separate;
	border:1px solid black;
	width:20rem;
	font-size:0.9rem;
}

J'ai fait cet essai dans les deux versions de ton code (table et flex) et le problème est le même.
Ceci a pour conséquence de réduire et décaler les tr et les cellules du tableau sur la gauche (voir image en bas). Je ne sais pas comment faire pour résoudre ce problème. J'ai essayé plusieurs ajouts sur les tr et les td tels que display:initial ou agir sur la largeur des éléments mais rien n'y fait. Je ne sais plus comment faire.
Voici mon code complet:

Code css :

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
.signes
{
	display:table;
	width:100%;
}
.signes > div
{
	display:table-cell;
	width:50%;
	text-align:center;
	vertical-align:top;
}
.signes > div > table
{
	display:inline-block;
	border-collapse:separate;
	border:1px solid black;
	width:20rem;
	font-size:0.9rem;
}
.signes th, .signes td
{
	border:1px solid black;
}
.signes th
{
	font-weight:bold;
	text-align:center;
}
.signes td
{
	width:50%;
}
.signes td[colspan]
{
	text-align:center;
	width:100%;
}

[Invité]

Un bon code est un code SIMPLE.

Reprends mes codes tels quels.

[moimp]

1) Justement, en appliquant exactement ton code, il ne marche pas: les tableaux ne sont pas centrés dans les div parents mais sont collés à gauche.

2) Ce que j'ai ajouté ne concerne que les cellules et fonctionne bien.

[moimp]

En ajoutant margin-auto sur le css des tables, cela fonctionne.