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固定对个表格的表头时问题就出现了,首先说明系统的 ...
随机推荐
- vue 监听store中的数值
computed: { isFollow () { return this.$store.state.demo.id; //需要监听的数据 } }, watch: { isFo ...
- thinkphp或者kohana 导入和读取文件
1.无论是那个框架的导入,其实都是一样的原理的,但是首先我们要导入包,可能就这点不同. kohana的导入包的方法:require_once(Kohana::find_file('vendor','P ...
- idea中查看java类继承图
复习java io,看了书里的这张图,太模糊了,想弄个出来放大看,一开始试了idea发现只能看父类,后来折腾了一会试了其他工具才发现还是idea好用. :) 一.打开type hierachy 光标放 ...
- github上fork了别人的项目后，再同步更新别人的提交(转)
原文地址:github上fork了别人的项目后,再同步更新别人的提交 我从github网站和用git命令两种方式说一下. github网站上操作 打开自己的仓库,进入code下面. 点击new pul ...
- python中Flask模块的使用
1.简介 在服务器上运行Flask接口,就能使用requests模块获取该接口的值. 先运行接口文件,再运行requests文件,即可获取值. 2.示例 2.1一个简单的flask接口 import ...
- Shiro集成web环境[Springboot]-基础使用
Shiro集成web环境[Springboot] 1.shiro官网查找依赖的jar,其中shiro-ehcache做授权缓存时使用,另外还需要导入ehcache的jar包 <dependenc ...
- rac备份及恢复的重要概念之一——Redo Threads和Streams
rac数据库的备份和恢复,与单实例Oracle数据库的备份和恢复没有根本的不同,但区别还是有的,如果大家理解了Redo Threads和Streams概念,也就没什么了,下面这段文字清晰了解释了两者的 ...
- python（4）之字典
字典的操作方式如下: info={ 'stu1101':"xiaohai", 'stu1102':'liming', 'stu1103':"heima", } ...
- js重写系统的弹框
//调用系统的弹框,不显示地址 window.alert = function(name){ var iframe = document.createElement("IFRAME& ...
- MySql查询最近一个月，一周，一天
最近一个月 SELECT * FROM table WHERE DATE_SUB(CURDATE(), INTERVAL 1 MONTH) <= date(time); 本月.当前月 SELEC ...