私はページに4つのテーブルを整列しようとしています。 しかし何らかの理由で私はそれらを同じ高さに揃えることができません。私は唯一の<table> <tr><td>
構造を使用するための制約があります。データは各テーブルの変種であるので、以下 JavaScript/CSSを使用して同じ高さのテーブル
そして、私が達成しようとしていますが、以下であるがために、テーブルにはどのくらいのデータを持っているに関係なく、それらのすべて同じ高さでなければなりません:
すべてのヘルプは素晴らしいことです。
私はページに4つのテーブルを整列しようとしています。 しかし何らかの理由で私はそれらを同じ高さに揃えることができません。私は唯一の<table> <tr><td>
構造を使用するための制約があります。データは各テーブルの変種であるので、以下 JavaScript/CSSを使用して同じ高さのテーブル
そして、私が達成しようとしていますが、以下であるがために、テーブルにはどのくらいのデータを持っているに関係なく、それらのすべて同じ高さでなければなりません:
すべてのヘルプは素晴らしいことです。
はflexboxesを見てみましょう:
.wrapper {
display: flex;
}
table {
display: flex;
margin-left: 5px;
border: 1px solid #000000;
}
<div class="wrapper">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
</div>
は、行の各テーブルの合計数を取得します。
<script type="text/javascript">
function max(tab_num_rows) { // you put the numbers into an array
var ret = tab_num_rows[0];
for (var i=1 ; i<tab_num_rows.length; i++) {
if (ret < tab_num_rows[i])
ret = tab_num_rows[i];
}
return ret;
}
</script>
次に、最大に達するまで余分な行を追加するために各テーブルをループするJQueryを作成します。
フレックスボックスはこれのための典型的な解決策です(他の回答を参照)。ただし、フレックスボックスを使用しないように制限されている場合は(たとえば、古いブラウザの互換性要件のため)、4つのテーブルをすべて
.wrap {
width: 100%;
}
td {
background: #eee;
vertical-align: top;
}
<table class="wrap">
<tr>
<td>
<table>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Three</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
</table>
</td>
</tr>
</table>
@pheromix忘れてしまった それ。今、私は 'vertical-align:top'を追加しました。 – Johannes
のような一つの「ラッパーテーブル」のセル、[どのように私は同じ高さを持つように、テーブル内のすべての行を強制することができます](https://stackoverflow.com/questionsの可能性のある重複/ 5671098/i-force-all-all-in-a-table-to-the-same-height) – AdhershMNair