2017-06-10 11 views
0

私はページに4つのテーブルを整列しようとしています。 しかし何らかの理由で私はそれらを同じ高さに揃えることができません。私は唯一の<table> <tr><td>構造を使用するための制約があります。データは各テーブルの変種であるので、以下 JavaScript/CSSを使用して同じ高さのテーブル

は、現在の画像です:

enter image description here

そして、私が達成しようとしていますが、以下であるがために、テーブルにはどのくらいのデータを持っているに関係なく、それらのすべて同じ高さでなければなりません:

enter image description here

すべてのヘルプは素晴らしいことです。

+0

のような一つの「ラッパーテーブル」のセル、[どのように私は同じ高さを持つように、テーブル内のすべての行を強制することができます](https://stackoverflow.com/questionsの可能性のある重複/ 5671098/i-force-all-all-in-a-table-to-the-same-height) – AdhershMNair

答えて

2

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>

1

は、行の各テーブルの合計数を取得します。

<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を作成します。

1

フレックスボックスはこれのための典型的な解決策です(他の回答を参照)。ただし、フレックスボックスを使用しないように制限されている場合は(たとえば、古いブラウザの互換性要件のため)、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>

+0

@pheromix忘れてしまった それ。今、私は 'vertical-align:top'を追加しました。 – Johannes

関連する問題