首页 > 代码库 > table中head表头固定,body滚动

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">&#xe636;</i>
 48         </div>
 49         <div class="lable_top_right">
 50             <i class="iconfont">&#xe6bb;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
 86                         </div>
 87                         <div style="float: right;">
 88                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
100                         </div>
101                         <div style="float: right;">
102                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
114                         </div>
115                         <div style="float: right;">
116                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
128                         </div>
129                         <div style="float: right;">
130                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
142                         </div>
143                         <div style="float: right;">
144                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
156                         </div>
157                         <div style="float: right;">
158                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
170                         </div>
171                         <div style="float: right;">
172                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
184                         </div>
185                         <div style="float: right;">
186                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
198                         </div>
199                         <div style="float: right;">
200                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
212                         </div>
213                         <div style="float: right;">
214                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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=http://www.mamicode.com/""><i class="iconfont">&#xe66e;</i>编辑</a>
226                         </div>
227                         <div style="float: right;">
228                             <a href=http://www.mamicode.com/""><i class="iconfont">&#xe6d3;</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滚动