HTML table标签固定高度，并且显示滚动条
Posted 萌萌的DDD
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>以上是关于HTML table标签固定高度，并且显示滚动条的主要内容，如果未能解决你的问题，请参考以下文章