テーブルの行を並べて表示する

Question

2つの列、た​​とえば24行のテーブルが1つあります（データベースから読み込まれ、動的テーブルになります）。今度はテーブルの行を自動的に並べて表示します（画面に合わせて）。左部分は12行、右部分は12行を保持する。 8列の3つの列などがあります。 これはhtml/cssで可能ですか？

例：これは、通常の表を表示していました
は：

<table> 
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead> 
<tbody> 
    <tr><td>1.1</td><td>1.2</td></tr> 
    <tr><td>2.1</td><td>2.2</td></tr> 
</tbody> 
</table> 

これは（画面サイズとテーブルのサイズに並んで配置され、テーブルの部品の数に依存）私が持っていたいものです。

<table style="float: left;"> 
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead> 
<tbody> 
    <tr><td>1.1</td><td>1.2</td></tr> 
</tbody> 
</table> 

<table style="float: right;"> 
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead> 
<tbody> 
    <tr><td>2.1</td><td>2.2</td></tr> 
</tbody> 
</table> 

Answer 1

あなたは基本的にテーブルがどのように機能するかを壊すことなく、標準的なHTMLテーブルを持つことはできないはずやりたい（そしてあなたがあなたの望ましい結果を得るような方法でCSSを変更することができれば私もわからないんだけど）。

@Daniel Cの示唆しているように、テーブルの代わりにdivを使用することをお勧めします。

BootstrapまたはFoundationのような反応性のあるグリッドレイアウトと協力して、何をしたいのですか。

Answer 2

短い回答：反応が必要な場合は、テーブルだけでは少し難しくなります。ブートストラップ+テーブルを使うことをお勧めします。

したがって、各テーブルには、次のようになります。あなたはjsfiddleに応答を見るために大画面が必要になりますhttps://jsfiddle.net/xwazzo/7x0v9hL6/

注：ここでは

<div class="col-xs-6 col-sm-4 col-md-3"> 
    <table class="blue"> 
    <thead> 
     <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>1.1</td> 
     <td>1.2</td> 
     </tr> 
     <tr> 
     <td>2.1</td> 
     <td>2.2</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

は実際の例です。

長い答え：CSSのトリックで あなたが応答テーブルをしたい場合は、そのことについての素晴らしい記事があり https://css-tricks.com/accessible-simple-responsive-tables/

Answer 3

あなたが代わりにテーブル要素のdivを使用する能力を持っている場合は、私がお勧めしますdivを使って全部を書き出し、divをテーブルのように動作させるためにCSSを使います。私はモバイルの最初のアプローチを書いていますので、モバイルで標準的な表のようにコード化しました。画面サイズを増やしていくと、あなたが望む外観が得られます。明らかにブレークポイントを使って遊んで、それぞれの "グループ"が画面サイズごとにどのくらい広いかを調整して、適切な数の列を取得します。残念ながら、あなたはテーブルヘッダーをすべての点で繰り返さなければなりません。あなたがやろうとしていることは避けられませんが、モバイルでそれらを隠すことはできます。

ヒント：テーブルの「モバイル」バージョンを表示するには、フィドルで画面を縮小します。拡大表示するには拡大します。デモのサイズは2つだけです。あなたが望む数だけ追加してください。

HTMLマークアップ：

<div class="table"> 
<div class="group"> 
    <div class="table-row table-head table-head-main"> 
    <div class="table-cell">Col 1</div> 
    <div class="table-cell">Col 2</div> 
    </div> 
    <div class="table-row"> 
    <div class="table-cell">1.1</div> 
    <div class="table-cell">1.2</div> 
    </div> 
</div> 
<div class="group"> 
    <div class="table-row table-head"> 
    <div class="table-cell">Col 1</div> 
    <div class="table-cell">Col 2</div> 
    </div> 
    <div class="table-row"> 
    <div class="table-cell">2.1</div> 
    <div class="table-cell">2.2</div> 
    </div> 
</div> 
</div> 

CSSコード：

.table { 
    display: table; 
    width: 100%; 
} 

.table-row { 
    display: table-row; 
    width: 100%; 
} 

.table-head div { 
    background: #cccccc; 
} 

.table-cell { 
    display: table-cell; 
    border: 1px dotted #000000; 
} 

.table-head { 
    display: none; 
} 

.table-head-main { 
    display: table-row; 
} 

.group { 
    display: table-row-group; 
} 

@media (min-width: 600px) { 
    .table-head { 
    display: table-row; 
    } 
    .group { 
    display: table; 
    float: left; 
    width: 50%; 
    } 
} 

https://jsfiddle.net/5s3cz15t/1/