table中head表头固定，body滚动

 <style type="text/css">

     .table-head {

         background-color: #;

         color: #;

     }

     .table-body {

         width: %;

         height: 300px;

         overflow-y: scroll;

     }

     .table-head table,

     .table-body table {

         width: %;

     }

     table tbody {

         height: 500px;

     }

     table thead,

     tbody tr {

         display: table;

         width: %;

         table-layout: fixed;

     }

     table thead {

         width: calc( % - 1em)

     }

     td{

         text-align:center; /*设置水平居中*/

     vertical-align:middle;/*设置垂直居中*/

     }

     -moz-calc(expression);

     /*chrome safari*/

     -webkit-calc(expression);

     /*Standard */

     calc();

 </style>

 </head>

 <body>

 <nav class="breadcrumb" style="color: #4981EC;">标签管理-标签查询</nav>

 <div class="lable_bigbox">

     <div class="lable_top_box">

         <span class="product_span">订单编号：</span>

         <div class="lable_input_box col-lg-2 col-md-3 col-sm-4 col-xs-5 padding_0">

             <input type="text" />

             <i class="iconfont"></i>

         </div>

         <div class="lable_top_right">

             <i class="iconfont"></i>

         </div>

     </div>

     <div class="table-head table table-border table-bordered table-striped" style="margin-top: 5%;">

         <table>

             <colgroup>

                 <col style="width: 80px;" />

                 <col />

             </colgroup>

             <thead>

                 <tr class="size_top">

                     <td>标签UID</td>

                     <td>标签状态</td>

                     <td>批次号</td>

                     <td>备注</td>

                     <td>操作</td>

                 </tr>

             </thead>

         </table>

     </div>

     <div class="table-body table table-border table-bordered table-striped">

         <table>

             <colgroup>

                 <col style="width: 80px;" />

                 <col />

             </colgroup>

             <tbody class="size_bottom">

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

                 <tr>

                     <td></td>

                     <td>已入库</td>

                     <td></td>

                     <td>已入库</td>

                     <td class="lable_td">

                         <div style="float: left;">

                             <a href=""><i class="iconfont"></i>编辑</a>

                         </div>

                         <div style="float: right;">

                             <a href=""><i class="iconfont"></i>删除</a>

                         </div>

                     </td>

                 </tr>

             </tbody>

         </table>

     </div>

 </div>

http://blog.csdn.net/hualele/article/details/52993315

https://github.com/ColoMan1/HT/blob/master/HT/src/lable_control.html

table中head表头固定，body滚动的更多相关文章

div+css实现表头固定内容滚动表格
<div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...
如何让table中td宽度固定
table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...
Table实现表头固定内容滚动
<div style="width: 800px;"> <div class="table-head"> <table> & ...
table 的thead th 固定 tbody滚动例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
多表头固定demo--html Table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
纯CSS实现table表头固定（自创备忘）
因为之前约定时候产品没说要表头固定,这次迭代测试突然提出这个需求,而且不知道因为什么未知原因非要这样不可--因为之前用了table标签做表单,而且也没用插件,这下就难了点,找另外一个前端前辈妹子商量了 ...
table 表头固定 thead固定. 1) 使用jquery.freezeheader.js
方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> ...
table头部、尾部固定;中间内容定高自适应滚动
table头部.尾部固定;中间内容定高自适应滚动很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...
jQuery,Table表头固定插件chromatable存在的问题及解决办法
在最近的项目中需要将表格的表头固定,搜寻了大量的资料,发现chromatable插件还是比较方便的.但是当我在一个页面中多次使用 chromatable固定对个表格的表头时问题就出现了,首先说明系统的 ...

随机推荐

MYSQL的C API之mysql_query
1.首先使用MYSQL conn 连接数据库 2.设置数据库编码 3.int res = mysql_query(&conn,"SQL语句"); if(!res)表示成功 ...
[LightOJ 1027] A Dangerous Maze
A Dangerous Maze You are in a maze; seeing n doors in front of you in beginning. You can choose any ...
eclipse初学者的使用
eclipse的使用字体设置: 设置环境字符: 设置背景颜色寻找窗口: java JDK的配置: 配置自动提示: 适合初学者适应环境开发.
使用AndroidStudio导入github项目
1.在studio中配置github的项目地址 2.当你点击github,会这个样子 3.此处放你要clone的地址 ,然后点击clone. 4.等一会会出现这个页面,然后点击yes ,会出现这个页面 ...
Android 之常用布局
LinearLayout 线性布局. android:orientation="horizontal" 制定线性布局的排列方式水平 horizontal 垂直 vertical ...
Java Web(一) 前言及体系结构
Web应用程序 Web程序是什么 Web应用程序就是一般所说的网站,由服务器,客户端浏览器以及网络组成.但Web程序又不是一般意义的网站,一般的网站是提供信息服务,重在内容,程序往往比较简单,但商用的 ...
spark使用正则表达式读入多个文件
String dir = "s3a://example/";String currentDir = dir + "{1[5-9],2[01]}/*.txt";J ...
1.python函数式编程-map函数
编程方法论面向过程函数式面向对象面向过程将编程过程拆分成多个步骤,在函数中按照每个步骤进行编程: 函数式编程编程语言定义的函数+数学意义的函数 1.不可变,不用变量保存状态,不修改变量: ...
spoj705
题解: 后缀数组求出height 然后ans＝所有串-所有height 代码: #include<bits/stdc++.h> using namespace std; ; int t,a ...
word个人信息的一种处理方式
下面是一种解决office文件更改作者的方法,步骤如下: 第一步:进入Word,Excel,或PowerPoint, 随便打开一个文件: 第二步:点击左上角的文件,进入文件功能界面: 第三步:点击选项 ...

table中head表头固定，body滚动

table中head表头固定，body滚动的更多相关文章

随机推荐

热门专题