どのように私はスクロールでhtmlテーブルを作成するのですか

Question

私は大きなHTMLテーブル（3000以上の要素）を持っていますが、明らかにすべてを一度に表示したくありません。テーブルの一部が表示されますが、そのほとんどはスクロールしている小さなボックスにすべて含まれています。私はこのサイトが使用するのと同様のテーブルを望んでいた：stackoverflow search table .Iは似たような私のコードのdoesntの仕事をやってみました：ここにサンプルテーブルは次のとおりです。

.table { 
 
    height: 150px; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}

<table id="myTable" class="table"> 
 
    <tr class="header"> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:40%;">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
</table>

スクロールはで表示されませんテーブルの側面。私は比較的新しいHTMLです

Answer 1

<table>要素はオーバーフロープロパティを尊重しません。ブロックにテーブルを設定することにより、overflowプロパティを強制：ビッグあなたはhttps://datatables.net/がもたらす可能性のエキストラの恩恵を受けるだろうとテーブル付き

.table { 
 
    display: block; 
 
    height: 150px; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}

<table id="myTable" class="table"> 
 
    <tr class="header"> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:40%;">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
</table>

を:)

Answer 2

divの内側に入れてコンテナ。

.container { 
    border: 1px solid #C0C0C0; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    height: 100px; 
} 

<div class="container"> 
    <table> 
    ... 
    </table> 
</div> 

https://codepen.io/anon/pen/NpmPOy

Answer 3

そのdiv要素にクラスを適用し、divタグであなたのテーブルをラップ試してみてください。

.table { 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}

<div class="table"> 
 
    <table id="myTable" class="table"> 
 
     <tr class="header"> 
 
     <th style="width:60%;">Name</th> 
 
     <th style="width:40%;">Country</th> 
 
     </tr> 
 
     <tr> 
 
     <td>Alfreds Futterkiste</td> 
 
     <td>Germany</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Berglunds snabbkop</td> 
 
     <td>Sweden</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Island Trading</td> 
 
     <td>UK</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Koniglich Essen</td> 
 
     <td>Germany</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Alfreds Futterkiste</td> 
 
     <td>Germany</td> 
 
     </tr> 
 
    </table> 
 
</div>