怎么給tbody加滾動條?通過css樣式給表格tbody加垂直滾動條


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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM