HTML table标签固定高度,并且显示滚动条

 关键设置

            /*关键设置 tbody出现滚动条*/
21             table tbody {
22                 display: block;
23                 height: 80px;
24                 overflow-y: scroll;
25             }
26             
27             table thead,
28             tbody tr {
29                 display: table;
30                 width: 100%;
31                 table-layout: fixed;
32             }
33             /*关键设置:滚动条默认宽度是16px 将thead的宽度减16px*/
34             table thead {
35                 width: calc( 100% - 1em)
36             }

HTML元素

   <body>
47         <table width="80%" border="1">
48             <thead>
49                 <tr>
50                     <th>姓名</th>
51                     <th>年龄</th>
52                     <th>出生年月</th>
53                     <th>手机号码</th>
54                     <th>单位</th>
55                 </tr>
56             </thead>
57             <tbody>
58                 <tr>
59                     <td>张三</td>
60                     <td>18</td>
61                     <td>1990-9-9</td>
62                     <td>13682299090</td>
63                     <td>阿里巴巴</td>
64                 </tr>
65                 <tr>
66                     <td>李四</td>
67                     <td>18</td>
68                     <td>1990-9-9</td>
69                     <td>13682299090</td>
70                     <td>阿里巴巴与四十大盗</td>
71                 </tr>
72                 <tr>
73                     <td>王五</td>
74                     <td>18</td>
75                     <td>1990-9-9</td>
76                     <td>13682299090</td>
77                     <td>腾讯科技</td>
78                 </tr>
79                 <tr>
80                     <td>孟想</td>
81                     <td>18</td>
82                     <td>1990-9-9</td>
83                     <td>13682299090</td>
84                     <td>浏阳河就业</td>
85                 </tr>
86             </tbody>
87         </table>
88     </body>

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值