tbody加滾動條實現思路:
1,把tbody設置成display:block,然后就對其高度設置一個固定值,overflow設置成auto。
2,把thead的tr設置成display:block。
3,因為都設置成block所以要給td手動添加寬度。
4,考慮到 tbody 產生了滾動條,這時會影響tbody以及thead的寬度,可以采用針對tbody設置::-webkit-scrollbar進行解決。
辦公資源網址導航 https://www.wode007.com
代碼實現:
css:
1 .table thead tr { 2 display:block; 3 } 4 .table tbody { 5 display: block; 6 height: 100px; 7 overflow: auto; 8 } 9 .table th { 10 width:20%; 11 } 12 .table td { 13 width:20%; 14 }
html:
1 <table class="table"> 2 <thead> 3 <tr> 4 <th>head1</th> 5 <th>head2</th> 6 <th>head3</th> 7 <th>head4</th> 8 <th>head5</th> 9 <th>head6</th> 10 </tr> 11 </thead> 12 <tbody> 13 <tr> 14 <td>1</td> 15 <td>1</td> 16 <td>1</td> 17 <td>1</td> 18 <td>1</td> 19 <td>1</td> 20 </tr> 21 <tr> 22 <td>2</td> 23 <td>2</td> 24 <td>2</td> 25 <td>2</td> 26 <td>2</td> 27 <td>2</td> 28 </tr> 29 <tr> 30 <td>3</td> 31 <td>3</td> 32 <td>3</td> 33 <td>3</td> 34 <td>3</td> 35 <td>3</td> 36 </tr> 37 <tr> 38 <td>4</td> 39 <td>4</td> 40 <td>4</td> 41 <td>4</td> 42 <td>4</td> 43 <td>4</td> 44 </tr> 45 <tr> 46 </tbody> 47 </table>