複数のテーブルを垂直方向に整列するようにフォーマットする方法
https://stackoverflow.com/questions/860671
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
一部の HTML コードを継承し、2 つの列の間でテキストが揃うように 2 つのテーブルを整列するように依頼されました。
これに 2 列の外観を提供する外部テーブルがあり、次に 2 つの内部テーブル (各列に 1 つ) があります。各内部テーブルには、テキストを保持するボックスが含まれています。クライアントが 2 つの列の間に配置したいのは、これらのテキスト ボックスです。
2 つの列間でテキスト行を「一致」させる方法はいくつか思いつきますが、単純でエレガントなものはありません。
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>
編集：これに関するさらなる明確化と制限。
これはサーブレット プログラムによって作成されるため、2 つの列の順序はループ ベースになります。つまり、1 つのループで最初 (左) 列を書き込み、次に別のループで 2 番目 (右) 列を書き込みます。これらは「ブレンド可能な」ループではありません。これらは次々に実行する必要があり、書式設定で実行できる内容が大幅に制限されます。
クライアントはサーブレットで「JavaScript なし」を指定しました。しっかりとした制限です。
CSS を使用できますが、2 つのループ (左、右) が固定されています。
解決
あなたがここに欲しいものを理解することは非常にわからない、あなたは行が動的に他の列にその対応の行に基づいて、その高さを調整したいようです。即ち左側の第1行目は、右側の最初の行よりも長いテキストを持っていますが、右の列の最初の行のテキストと2行目の間にいくつかの空白を残して、両方の二行が整列開始したいです右の列、正しいですか？
このケースでなければならない、あなたのソリューションは、ラッピングテーブルを削除することです。テーブルがすでに列に基づいているので、あなたが列を作成するために余分なテーブルを必要としません。
このコードを試してみてください。
<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>
これはあなたが何をしているかやってのひどいと非常に古い学校の道であると言うする必要はありませんが、あなたはdiv要素とCSSを使用したほうが良いですが、あなたはコードを継承言ったように私はリファクタリングのビットがないことを理解しますオプションます。
他のヒント
他の人が言ったことから、問題は理解できたと思います。コードを自分で変更できる場合 (明示的には言いません)、最も簡単な解決策は次のとおりです。
- 外部テーブルで複数の行を使用します。2x1 ではなく 2 列 x N 行になります。
- この外側のテーブルの各セルを垂直方向の中央に揃えるように設定します (これはすべてのブラウザのデフォルトです)。
- 各セル内に個別のテーブルを配置します。同じ行では、テーブルは中央に整列します。
実際には CSS はありません (つまり、テーブル以外）クロスブラウザーで機能する解決策を私が考えることができます。使用できます inline-block ただし注意点があります。
私の理解が正しければ、2 つのテーブルの行を、テーブルの各行の 2 つのテーブルのうち最も高い行の高さに合わせたいということです。
それを行うには次の 2 つの方法しかないと思います。
- JavaScript を使用して各テーブルの各行の高さを計算し、最も高い値 (行 1 の最高値、行 2 の最高値など) に設定します。
- 2 つのテーブルを 1 つにマージします (3 つすべてをマージすることをお勧めします)。
2 番目の方法が最適な方法であることは明らかですが、両方のテーブルの行数が常に同じであり (それでも必要です)、HTML の大部分を変更できない場合は、1 番目の方法でも機能するはずです。
それ以外に、HTML / CSS ソリューションはないと思います。
所属していません StackOverflow
