首页 > 其他 > 详细

table 添加滑动 表头(th)不动

时间:2019-10-14 12:09:26      阅读:146      评论:0      收藏:0      [点我收藏+]

直接上代码如下:

技术分享图片
 1 <div>
 2 <div style="overflow-y: auto;">
 3 <table class="table2">
 4 <thead>
 5 <tr>
 6 <th style="width: 42%">编号</th>
 7 <th style="width: 25%;">比对方式</th>
 8 <th style="width: 25%;">认定状态</th>
 9 <th style="width: 3%"></th>
10 </tr>
11 </thead>
12 </table>
13 </div>
14 <div style="background-color: white;overflow-y: auto; height: 320px;">
15 <table class="table2">
16 <tbody>
17 <tr ng-onclick="">
18 <td style="width: 40%">201910101110</td>
19 <td style="width: 21%">同一认定</td>
20 <td style="width: 27%">未认定</td>
21 </tr>
22 <tr>
23 <td>201910101121</td>
24 <td>同一认定</td>
25 <td>未认定</td>
26 </tr>
27 <tr>
28 <td>201910101111</td>
29 <td>同一认定</td>
30 <td>未认定</td>
31 </tr>
32 <tr>
33 <td>201910101112</td>
34 <td>同一认定</td>
35 <td>未认定</td>
36 </tr>
37 <tr>
38 <td>201910101113</td>
39 <td>同一认定</td>
40 <td>未认定</td>
41 </tr>
42 <tr>
43 <td>201910101114</td>
44 <td>同一认定</td>
45 <td>未认定</td>
46 </tr>
47 <tr>
48 <td>201910101115</td>
49 <td>同一认定</td>
50 <td>未认定</td>
51 </tr>
52 </tbody>
53 </table>
54 </div>
55 </div>
View Code

结果如下:

技术分享图片

 

技术分享图片

 

 

 至于表头和内容的对齐问题,就自己慢慢调吧;

 

table 添加滑动 表头(th)不动

原文:https://www.cnblogs.com/wwr01/p/11670260.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!