怎么给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 20%;
11 }
12 .table td {
13 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>
原文地址:https://www.cnblogs.com/ypppt/p/13050906.html