table中head表头固定，body滚动
Posted ColaMan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了table中head表头固定，body滚动相关的知识，希望对你有一定的参考价值。
1 <style type="text/css"> 2 .table-head { 3 background-color: #999; 4 color: #000; 5 } 6 .table-body { 7 width: 100%; 8 height: 300px; 9 overflow-y: scroll; 10 } 11 .table-head table, 12 .table-body table { 13 width: 100%; 14 } 15 table tbody { 16 height: 500px; 17 } 18 table thead, 19 tbody tr { 20 display: table; 21 width: 100%; 22 table-layout: fixed; 23 } 24 table thead { 25 width: calc( 100% - 1em) 26 } 27 td{ 28 text-align:center; /*设置水平居中*/ 29 vertical-align:middle;/*设置垂直居中*/ 30 } 31 -moz-calc(expression); 32 /*chrome safari*/ 33 34 -webkit-calc(expression); 35 /*Standard */ 36 37 calc(); 38 </style> 39 </head> 40 <body> 41 <nav class="breadcrumb" style="color: #4981EC;">标签管理-标签查询</nav> 42 <div class="lable_bigbox"> 43 <div class="lable_top_box"> 44 <span class="product_span">订单编号：</span> 45 <div class="lable_input_box col-lg-2 col-md-3 col-sm-4 col-xs-5 padding_0"> 46 <input type="text" /> 47 <i class="iconfont"></i> 48 </div> 49 <div class="lable_top_right"> 50 <i class="iconfont"></i> 51 </div> 52 </div> 53 54 <div class="table-head table table-border table-bordered table-striped" style="margin-top: 5%;"> 55 <table> 56 <colgroup> 57 <col style="width: 80px;" /> 58 <col /> 59 </colgroup> 60 <thead> 61 <tr class="size_top"> 62 <td>标签UID</td> 63 <td>标签状态</td> 64 <td>批次号</td> 65 <td>备注</td> 66 <td>操作</td> 67 </tr> 68 </thead> 69 </table> 70 </div> 71 <div class="table-body table table-border table-bordered table-striped"> 72 <table> 73 <colgroup> 74 <col style="width: 80px;" /> 75 <col /> 76 </colgroup> 77 <tbody class="size_bottom"> 78 <tr> 79 <td>1</td> 80 <td>已入库</td> 81 <td>0001</td> 82 <td>已入库</td> 83 <td class="lable_td"> 84 <div style="float: left;"> 85 <a href=""><i class="iconfont"></i>编辑</a> 86 </div> 87 <div style="float: right;"> 88 <a href=""><i class="iconfont"></i>删除</a> 89 </div> 90 </td> 91 </tr> 92 <tr> 93 <td>1</td> 94 <td>已入库</td> 95 <td>0001</td> 96 <td>已入库</td> 97 <td class="lable_td"> 98 <div style="float: left;"> 99 <a href=""><i class="iconfont"></i>编辑</a> 100 </div> 101 <div style="float: right;"> 102 <a href=""><i class="iconfont"></i>删除</a> 103 </div> 104 </td> 105 </tr> 106 <tr> 107 <td>1</td> 108 <td>已入库</td> 109 <td>0001</td> 110 <td>已入库</td> 111 <td class="lable_td"> 112 <div style="float: left;"> 113 <a href=""><i class="iconfont"></i>编辑</a> 114 </div> 115 <div style="float: right;"> 116 <a href=""><i class="iconfont"></i>删除</a> 117 </div> 118 </td> 119 </tr> 120 <tr> 121 <td>1</td> 122 <td>已入库</td> 123 <td>0001</td> 124 <td>已入库</td> 125 <td class="lable_td"> 126 <div style="float: left;"> 127 <a href=""><i class="iconfont"></i>编辑</a> 128 </div> 129 <div style="float: right;"> 130 <a href=""><i class="iconfont"></i>删除</a> 131 </div> 132 </td> 133 </tr> 134 <tr> 135 <td>1</td> 136 <td>已入库</td> 137 <td>0001</td> 138 <td>已入库</td> 139 <td class="lable_td"> 140 <div style="float: left;"> 141 <a href=""><i class="iconfont"></i>编辑</a> 142 </div> 143 <div style="float: right;"> 144 <a href=""><i class="iconfont"></i>删除</a> 145 </div> 146 </td> 147 </tr> 148 <tr> 149 <td>1</td> 150 <td>已入库</td> 151 <td>0001</td> 152 <td>已入库</td> 153 <td class="lable_td"> 154 <div style="float: left;"> 155 <a href=""><i class="iconfont"></i>编辑</a> 156 </div> 157 <div style="float: right;"> 158 <a href=""><i class="iconfont"></i>删除</a> 159 </div> 160 </td> 161 </tr> 162 <tr> 163 <td>1</td> 164 <td>已入库</td> 165 <td>0001</td> 166 <td>已入库</td> 167 <td class="lable_td"> 168 <div style="float: left;"> 169 <a href=""><i class="iconfont"></i>编辑</a> 170 </div> 171 <div style="float: right;"> 172 <a href=""><i class="iconfont"></i>删除</a> 173 </div> 174 </td> 175 </tr> 176 <tr> 177 <td>1</td> 178 <td>已入库</td> 179 <td>0001</td> 180 <td>已入库</td> 181 <td class="lable_td"> 182 <div style="float: left;"> 183 <a href=""><i class="iconfont"></i>编辑</a> 184 </div> 185 <div style="float: right;"> 186 <a href=""><i class="iconfont"></i>删除</a> 187 </div> 188 </td> 189 </tr> 190 <tr> 191 <td>1</td> 192 <td>已入库</td> 193 <td>0001</td> 194 <td>已入库</td> 195 <td class="lable_td"> 196 <div style="float: left;"> 197 <a href=""><i class="iconfont"></i>编辑</a> 198 </div> 199 <div style="float: right;"> 200 <a href=""><i class="iconfont"></i>删除</a> 201 </div> 202 </td> 203 </tr> 204 <tr> 205 <td>1</td> 206 <td>已入库</td> 207 <td>0001</td> 208 <td>已入库</td> 209 <td class="lable_td"> 210 <div style="float: left;"> 211 <a href=""><i class="iconfont"></i>编辑</a> 212 </div> 213 <div style="float: right;"> 214 <a href=""><i class="iconfont"></i>删除</a> 215 </div> 216 </td> 217 </tr> 218 <tr> 219 <td>1</td> 220 <td>已入库</td> 221 <td>0001</td> 222 <td>已入库</td> 223 <td class="lable_td"> 224 <div style="float: left;"> 225 <a href=""><i class="iconfont"></i>编辑</a> 226 </div> 227 <div style="float: right;"> 228 <a href=""><i class="iconfont"></i>删除</a> 229 </div> 230 </td> 231 </tr> 232 </tbody> 233 </table> 234 </div> 235 </div>
http://blog.csdn.net/hualele/article/details/52993315
https://github.com/ColoMan1/HT/blob/master/HT/src/lable_control.html
以上是关于table中head表头固定，body滚动的主要内容，如果未能解决你的问题，请参考以下文章