28172 sujets

CSS et mise en forme, CSS3

Bonjour !

J'ai un document qui se structure de la façon suivante :
<div>
<div>
<table>
<thead>
<tr>
<th colspan="2">TITRE</th>
</tr>
</thead>
<tbody>
<tr>
<th>label</th><td>valeur</td>
</tr>
(...)
<tr>
<th>label</th><td>valeur</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<th colspan="2">TITRE</th>
</tr>
</thead>
<tbody>
<tr>
<th>label</th><td>valeur</td>
</tr>
(...)
<tr>
<th>label</th><td>valeur</td>
</tr>
</tbody>
</table>
</div>
</div>

En gros, 2 div à largeur identique (50%), contenant des tables à hauteur fixe en pixels.
Seulement, les tables du div de droite contiennent moins de données que les tables de gauches et en conséquence, les champs ne sont pas alignés. Il se produit un effet un peu semblable à un text-align justify mais en hauteur. Pourtant firebug m'indique que le line-height de toutes les tables est identique.
Ce que je voudrais obtenir c'est les champs à la meme hauteur dans les 2 tables, et puisqu'il y a moins de champs dans les tables du div de droite, qu'il reste du blanc en dessous de chaque table.

J'ai essayé de créer des tr vides dans les tables de droite pour qu'il y ait le même nombre de champs mais ça n'a pas été concluant (le résultat est différent mais toujours pas aligné).

Je travaille sur un outil interne et ne peut malheureusement pas faire de screenshot.

Merci d'avance

Sapher
Salut,

En faisant un tableau à deux colonnes au lieu de faire deux tableaux d'une colonne dans deux div, tu résoudrais ton problème. A voir si cela correspond à ce que tu veux faire. C'est à mon sens la seule possibilité pour que ce soit parfaitement aligné. A moins de fixer des hauteurs au cellules (une hauteur maximum), mais ça pourrait poser des problèmes d'accessibilité en cas d'agrandissement de la taille du texte par le visiteur.
Salut,

Malheureusement je ne peux pas faire comme ça à cause de la façon dont je récupère les valeurs du tableau envoyées par le controlleur php.