HTML、CSS、修正のヘッダーを使用したテーブル本体のスクロール

Question

修正ヘッダーを使用してテーブルを垂直方向にスクロールできます。また、テーブルの幅をブラウザに合わせたいと思っています。

**、可能な限り、ここで

は私の JSfiddle

table{ 
 
    border-spacing: 0; 
 
    border: 2px solid black; 
 
} 
 

 
table tbody tr td, thead th { 
 
    border-right: 1px solid black; 
 
}

<div class="table_container"> 
 
    <table> 
 
    <thead> 
 
    <tr> 
 
     <th>Head 1</th> 
 
     <th>Head 2</th> 
 
     <th>Head 3</th> 
 
     <th>Head 4</th> 
 
     <th>Head 5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

で、ちょうど 'CSS' 部分で、 'HTML' 部分に変更を加えないでください

Answer 1

この

.table_container table{ 
    display: table; 
    width: 100%; 
} 
    .table_container table thead, .table_container table tbody { 
    float: left; 
    width: 100%; 
} 
    .table_container table tbody { 
    overflow: auto; 
    height: 70px; 
} 
    .table_container table tr { 
    width: 100%; 
    display: table; 
    text-align: left; 
} 
    .table_container table th, .table_container table td { 
    width:20%; 
} 

Answer 2

アムをお試しください再発明の大きなファンではないので、md_data_tableは見るべき良いオプションです。 （角1.5.8で動作し、同様にAngular2でサポートされます）

https://github.com/iamisti/mdDataTable

bower install md-data-table --save 

• プランクトン