tbody加滚动条实现思路:1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。2,把thead的tr设置成display:block。3,因为都设置成block所以要给td手动添加宽度。4,考虑到 tbody 产生了滚动条,这设置::-webkit-scrollbar进行解决。
tbody加滚动条实现思路:
代码实现:
.table thead tr {
display:block;
}
.table tbody {
display: block;
height: 100px;
overflow: auto;
}
.table th {
width:20%;
}
.table td {
width:20%;
}
<table class="table">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
<th>head6</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
</tbody>
</table>