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固定对个表格的表头时问题就出现了,首先说明系统的 ...
随机推荐
- leetcode-algorithms-8 String to Integer (atoi)
leetcode-algorithms-8 String to Integer (atoi) Implement atoi which converts a string to an integer. ...
- 51nod-1181-两次筛法
1181 质数中的质数(质数筛法) 题目来源: Sgu 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 如果一个质数,在质数列表中的编号也是质数,那么就 ...
- Highcharts 配置选项详细说明
Highcharts 配置选项详细说明 Highcharts 提供大量的配置选项参数,您可以轻松定制符合用户要求的图表,本章节为大家详细介绍Highcharts 配置选项使用说明: 参数配置(属性+事 ...
- Grafana安装配置介绍
一.Grafana介绍 Grafana是一个可视化面板(Dashboard),有着非常漂亮的图表和布局展示,功能齐全的度量仪表盘和图形编辑器,支持Graphite.zabbix.InfluxDB.Pr ...
- Oracle date timestamp 毫秒 - 时间函数总结(转)
原文地址:Oracle date timestamp 毫秒 - 时间函数总结 yyyy-mm-dd hh24:mi:ss.ff 年-月-日 时:分:秒.毫秒 --上一月,上一年select add_ ...
- Django之自定义分页
分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该显示在页面上的数据在数据库表中的起始位置. 1. 每页显示的数据条数 2. 每页显示页号链接数 3. 上一页和下一页 4. ...
- WebSphere禁用SSLv3和RC4算法教程
WebSphere经常会报“SSL 3.0 POODLE攻击信息泄露”和"SSL/TLS 受诫礼(BAR-MITZVAH)攻击"两个漏洞,前者建议禁用SSL算法后者建议禁用RC4算 ...
- oracle中计算两个日期的相差天数、月数、年数、小时数、分钟数、秒数等
oracle如何计算两个日期的相差天数.月数.年数.小时数.分钟数.秒数 1.相差天数(两个日期相减) --Oracle中两个日期相差天数-- select TO_NUMBER(TO_DATE('20 ...
- Ubuntu上安装MySQL
Ubuntu上安装MySQL非常简单只需要几条命令就可以完成.`````` sudo apt-get update sudo apt-get install mysql-server 会弹出提示,让输 ...
- -L、-rpath和-rpath-link的区别
链接器ld的选项有 -L,-rpath 和 -rpath-link,看了下 man ld,大致是这个意思: -L:: “链接”的时候去找的目录,也就是所有的 -lFOO 选项里的库,都会先从 -L ...