2列に複数のhtmlテーブルを表示するには

Question

私はいくつかのデータを取得し、div要素の中に新しく作成したテーブルを追加することでhtmltablesを作成するアプリケーションをjQuery上で実行しています。
テーブルはきれいに表示されますが、ユーザーが隣り合わせに表示されるようにして、ユーザーが2行2行を見て、上下にスクロールしないようにします。

コード構造：

<div id=example> 
<table id=1> 
    <tr> 
    <td>..</td><td>..</td> 
    </tr> 
<table> 
<table id=2> 
    <tr> 
    <td>..</td><td>..</td> 
    </tr> 
    more rows.. 
<table> 
</div> 

テーブルは、行の動的な数を持っており、いくつかの行は、セルの数が異なります。

table1 |テーブル2
テーブル3 |表4
table5 |テーブル6
など

html（テーブルの作成時）またはjQueryセレクタおよびフィルタを使用してこれを行うにはどうすればよいですか？あなたは、ブートストラップを使用している場合

Answer 1

を、最も簡単な解決策はFlexboxを使用していました。

私の解決策は、このpostからのJan Derkの答えに基づいていました。このソリューションでもあり

jQuery("#div_id").css({"display":"flex","flex-wrap":"wrap", "justify-content": "center"}); 

：私はこれらのCSSプロパティを割り当てられ、周囲のDiv要素に続い

jQuery("table").each(function(index, value) { 

    if(index%2===0){ 

     jQuery(this).css({"float": "center","width": "45%"}); 

    }else { 

     jQuery(this).css({"float": "left","width": "45%"}); 

    } 

}); 

と：私は唯一の2列を望んでいたので

私は私のテーブルの上にfloat: left/rightプロパティを使用しましたウィンドウのサイズを変更したり、モバイル画面を使用したりすると、動的に反応し、サイズが変更されます。

Answer 2

、あなたはそれらのグリッド・システムを使用することができます。Bootstrap Grid System

あなたは、あなたが幅whosは親divの中で、あなたのテーブルを入れない可能性がない場合は50％で、その後、2つの親のdivを置きます別の部門では幅は100％です。テーブルの幅と画面幅などのために乱雑になることがあります。

まだ使用していない場合は、CSSフレームワークを使用することを強くお勧めします。

Answer 3

あなたはグリッドシステムを管理するためにブートストラップを使うことができます。 コードを投稿していないため、例はありません。

Answer 4

すでにテーブルを作成しているので、ネストしたテーブルを作成することもできます。もちろん、このすべてをあなたの心が欲しいものに合わせて整えることができます。

table  { border: solid 1px black } 
 
table table { border: solid 1px red }

<table id=TMain> 
 
    <tr> 
 
    <td> 
 
     <table id=T1a> 
 
     <tr><td>..</td><td>..</td><td>..</td></tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table id=T1b> 
 
     <tr><td>..</td><td>..</td></tr> 
 
     <tr><td>..</td><td>..</td></tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <table id=T2a> 
 
     <tr><td>..</td><td>..</td></tr> 
 
     <tr><td>..</td><td>..</td></tr> 
 
     <tr><td>..</td><td>..</td></tr> 
 
     </table> 
 
    </td> 
 
    <td> 
 
     <table id=T2b> 
 
     <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 5

Iオプション - フロートCSSを使用します。
例：

<div style="float: left;width: 49%;"> 
    <!--table 1--> 
</div> 
<div style="float: right;width: 49%;"> 
    <!--table 2--> 
</div> 

オプションII - 別のテーブル内
例あなたのテーブルを置く：異なるものを試した後

<table> 
    <tbody> 
     <tr> 
      <td>table 1</td> 
      <td>table 2</td> 
     </tr> 
     <tr> 
      <td>table 3</td> 
      <td>table 4</td> 
     </tr> 
     <tr> 
      <td>table 5</td> 
      <td>table 6</td> 
     </tr> 
    </tbody> 
</table> 

Answer 6

シンプルなあなたはCSSでそれを行うことができます。 CSSセレクタを使用すると、div内のすべてのテーブルが選択され、幅50％に設定されます。このようにCSSを使用します。

<style> 
    #example table{ 
     width: 50%; 
    } 
</style> 

これは完璧に動作しない場合は、フロートを追加するには、次のように左：

<style> 
    #example table{ 
     float: left; 
     width: 50%; 
    } 
</style>