2
私はhtmlとcssで美しいテーブルを作成しようとしています。だからここに私は一瞬のためにやっているものです：https://jsfiddle.net/mrg0szzt/テーブルの本文をスクロール可能に表示
あなたが見ることができるように、私は問題を抱えている：
私はTBODYに
display:blockを置けば、私は最初の列に整列すべてのデータを持っています..私はdisplay:table-header-group;overflow-y: auto;ストップ作業を置けば。...
/* IT's just for the style, please jump to line 44 */
.gestion-table {
background: white;
margin: auto;
width: 90%;
border-collapse: collapse;
}
.gestion-table th {
color: #D5DDE5;
background: #1b1e24;
font-size: 18px;
padding: 10px;
vertical-align: middle;
border-right: 1px solid white;
}
.gestion-table tr {
color: #666B85;
font-size: 16px;
}
.gestion-table tr:hover td {
background: #4E5066;
color: #FFFFFF;
}
.gestion-table tr:nth-child(odd) td {
background: #EBEBEB;
}
.gestion-table tr:nth-child(odd):hover td {
background: #4E5066;
}
.gestion-table td {
background: #FFFFFF;
padding: 10px;
font-size: 16px;
border-right: 1px solid #C1C3D1;
}
/* HERE STARTS THE PROBLEM */
//Switch between the two display methods on the tbody and see the result
//I'm searching for scrollable tbody with max-height of 150px for example
.gestion-table thead {
display: table-header-group;
width: 100%;
}
.gestion-table tbody {
//display:table-header-group;
display: block;
overflow-y: auto;
width: 100%;
max-height: 150px;
}<table class="gestion-table">
<thead>
<tr>
<th style="width: 15%;">Field 1 </th>
<th style="width: 45%;">Field 2 </th>
<th style="width: 10%;">Field 3 </th>
<th style="width: 15%;">Field 4 </th>
<th style="width: 15%;">Field 5 </th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td>
<td>Element 4</td>
<td>Element 5</td>
</tr>
</tbody>
</table>
私は何か良いCSSのみのソリューションを見つけることができませんでしたので、私はおそらく2つのテーブルに1つずつに分割します同じ列の幅で残りの1つを選択します。そしておそらく、下の表の 'overflow-y：scroll;'のラッピングdiv。その他のさまざまな回避策があります：[表示方法] - [スクロールバー----- HTMLテーブル]（https://stackoverflow.com/questions/8232713/how-to-display-scroll-bar-onto -a-html-table） – ippi