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固定对个表格的表头时问题就出现了,首先说明系统的 ...

随机推荐

python-MongoDB 非关系型数据库
一简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库.不采用关系型主要是为了获得 ...
laravel请求到响应的生命周期
请求到响应的核个执行过程,主要可以归纳为四个阶段,即程序启动准备阶段.请求实例化阶段.请求处理阶段.响应发送和程序终止阶段. public\index.php中有这么一段代码 $app = requi ...
[luogu P3382] 三分法
[luogu P3382] 三分法题目描述如题,给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 输入输出格式输入格式: 第一行一次 ...
[contest 782] 9.7
[contest 782] 9.7 - XJOI 个人觉得温暖题啊,,,可是卡毛空间呀!!! T1 传送
Liunx下安装jdk7
一. 查询系统中是否有安装过jdk: # rpm -qa | grep java 查询到有安装,使用命令卸载: # rpm -e --nodeps java-1.6.0-openjdk-1.6.0 ...
web服务器-----Tomcat 7.0安装
下载地址:http://tomcat.apache.org/ 1.下载 2.解压缩---c盘 3.运行bin\startup.bat 启动Tomcat服务器运行bin\shutdown.bat关闭T ...
redis的文件事件
redis的文件事件:即与io相关的事件. /* File event structure */ typedef struct aeFileEvent { int mask; /* one of AE ...
ISO/OSI七层网络参考模型、TCP/IP四层网络模型和教学五层网络模型
一.说明直接的原因是昨晚<计算机网络(自顶向下方法)>到货了,以为能讲得有些不一样,但看完整本也就是老调地讲过来讲应用层.传输层.网络层.网络接口层.感觉比之谢希仁的<计算机网络& ...
springboot程序构建一个docker镜像（十一）
准备工作环境: linux环境或mac,不要用windows jdk 8 maven 3.0 docker 对docker一无所知的看docker教程. 创建一个springboot工程引入web ...
MSOCache office问题
\MSOCache 链接:https://pan.baidu.com/s/1dVvjYnD0D6DG6oFK_Mww2w密码:qrvp undefied

table中head表头固定，body滚动

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

随机推荐

热门专题