Comment formater plusieurs tables pour l'alignement vertical
https://stackoverflow.com/questions/860671
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai hérité du code HTML et on m'a demandé d'aligner les deux tables de sorte que les lignes de texte entre les deux colonnes.
Il y a une table extérieure qui offre un regard sur deux colonnes à cette chose, puis deux tables internes (une pour chaque colonne). Chaque table interne contient des boîtes qui contiennent du texte. Ce sont ces boîtes de texte que le client veut aligné entre les deux colonnes.
Je peux penser à des façons de faire les lignes de texte « match » entre les deux colonnes, mais rien de simple ou élégant.
Voici le code html:
<html>
<head>
<title>Test</title>
</head>
<body >
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="50%">
<hr align="left" />
<p><center><strong>Left Side</strong></center></p>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="5%">
<strong>1:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%">
<strong>2:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
</table>
</td>
<td width="50%">
<hr align="left" />
<p><center><strong>Right Side</strong></center></p>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td width="5%">
<strong>1:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%">
<strong>2:</strong>
</td>
<td width="90%">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%">
</td>
<td width="90%">
<hr align="left" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
EDIT:. D'autres précisions et restrictions sur cette chose
-
Il est créé par un programme de servlet, de sorte que l'ordre des deux colonnes est à base de boucles. Autrement dit, une boucle écrit la première colonne (à gauche), puis une autre boucle écrit la deuxième colonne (à droite). Ils ne sont pas « blendable » boucles -. Ils doivent exécuter l'un après l'autre, ce qui limite sévèrement ce que je suis autorisé à faire avec la mise en forme
-
Le client a spécifié "pas javascript" dans les servlets. Il est une restriction ferme.
Je peux utiliser les CSS, mais les deux boucles (à gauche, puis à droite) sont fixés.
La solution
Pas très sûr de comprendre ce que vous voulez ici, semble que vous voulez que les lignes ajuster dynamiquement leur hauteur en fonction de sa ligne de contrepartie de l'autre colonne. C'est à dire. la première rangée sur le côté gauche a un texte plus long que la première rangée sur le côté droit, mais vous voulez les deux secondes lignes à commencer alignées, laissant un espace vide entre le texte de la première ligne sur la colonne de droite et la deuxième rangée sur la colonne de droite, correcte?
Doit-il être le cas, votre solution est d'enlever la table d'emballage. Une table est déjà basé sur des colonnes, de sorte que vous n'avez pas besoin d'une table supplémentaire pour créer les colonnes.
Essayez ce code:
<html>
<head>
<title>Test</title>
</head>
<body>
<table width="100%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td colspan="2" width="50%">
<p><center><strong>Left Side</strong></center></p>
</td>
<td colspan="2" width="50%">
<p><center><strong>Right Side</strong></center></p>
</td>
<tr>
<tr>
<td width="5%" valign="top">
<strong>1:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
<td width="5%" valign="top">
<strong>1:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%"> </td>
<td width="45%">
<hr align="left" />
</td>
<td width="5%"> </td>
<td width="45%">
<hr align="left" />
</td>
</tr>
<tr>
<td width="5%" valign="top">
<strong>2:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
<td width="5%" valign="top">
<strong>2:</strong>
</td>
<td width="45%" valign="top">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</td>
</tr>
<tr>
<td width="5%"> </td>
<td width="45%">
<hr align="left" />
</td>
<td width="5%"> </td>
<td width="45%">
<hr align="left" />
</td>
</tr>
</table>
</body>
</html>
Pas besoin de dire que c'est une façon scolaire terrible et très ancienne de faire ce que vous faites, vous feriez mieux d'utiliser divs et css, mais comme vous avez dit que vous avez hérité du code, je comprends qu'un peu de refactoring n'est pas une option.
Autres conseils
OK Je pense que je comprends le problème, de ce que les autres ont dit. Si vous êtes en mesure de changer le code vous-même (vous ne dites pas explicitement), la solution la plus rapide est la suivante:
- Utiliser plusieurs rangées sur la table externe, à savoir deux colonnes x N lignes au lieu de 2x1.
- Définir chaque cellule de ce tableau externe pour être alignée verticalement par rapport au milieu (ce qui est la valeur par défaut dans tous les navigateurs).
- Mettez une table séparée à l'intérieur de chaque cellule. Dans la même ligne, les tables seront alignées au milieu.
Il n'y a pas vraiment de solutions CSS (à savoir non-table) que je peux penser que le travail multi-navigateur. Vous pouvez utiliser, mais il y a inline-block mises en garde.
Si je comprends bien, vous voulez que les lignes de deux tables pour adapter la hauteur du rang le plus élevé des deux pour chaque ligne du tableau.
Je pense que les deux seules façons de le faire sont:
- Utilisez javascript pour calculer la hauteur de chaque ligne pour chaque table et les mettre à la plus élevée (la plus élevée de la ligne 1, le plus haut de la ligne 2, etc.).
- Fusionner les deux tables dans un (mieux, fusionner les trois).
Le second est évidemment la voie à suivre, mais le premier devrait également fonctionner si les deux tables ont toujours le même nombre de lignes (mais vous avez besoin que de toute façon) et vous ne pouvez pas changer une grande partie du html.
En dehors de cela, je pense ne pas il y a une solution html / css.
