<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>采购数据上报管理</title>
<style type="text/css" media="screen">
*{margin:0;padding:0;}
#chenkbox {position: relative;width:98%;margin: 100px auto 0;}
#alltable {width:98%;font-size:14px;cursor:e-resize;border: 1px solid #ccc;border-collapse: collapse;border-spacing: 0;}
#alltable th,
#alltable td{max-width:127px;padding: 5px;text-align:center;cursor: pointer;border: 1px solid #ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#alltable th{padding: 8px 5px;color:#666;background: #dedede;}
</style>
</head>
<body>
<div id="chenkbox" style="height:120px;overflow-y: scroll">
<table id="alltable">
<thead>
<tr>
<th title="编码">编码</th>
<th title="品名">品名</th>
<th title="规格">规格</th>
<th title="剂型">剂型</th>
<th title="最小包装单位">最小包装单位</th>
<th title="批准文号">批准文号</th>
<th title="批号">批号</th>
<th title="生产日期">生产日期</th>
<th title="有效期">有效期</th>
<th title="往来单位编号">往来单位编号</th>
<th title="单位名称">单位名称</th>
<th title="采购数量">采购数量</th>
<th title="购货时间">购货时间</th>
<th title="验收时间">验收时间</th>
<th title="操作">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>121</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>122</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>129</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>130</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>100</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>111</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>88</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>999</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>333</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>10</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
<tr>
<td>88</td>
<td><a href="http://www.baidu.com">采购数量</a></td>
<td>采购数量</td>
<td>采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量采购数量</td>
<td>采购数量采购数量</td>
<td>采购数量采购数量</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/colResizable-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#alltable").tablesorter();
$("#alltable").colResizable({
liveDrag:true,
draggingClass:"dragging",
resizeMode:'overflow'
});
var tableCont = $('#chenkbox');
var height = $('#alltable').find('thead tr th').height();
tableCont.on('scroll', function(e){
var scrollTop = $(this).scrollTop() - 1;
$('#alltable').find('thead tr th').css({
height : height + 1,
transform : '-webkit-translateY(' + scrollTop + 'px)' ,
transform : '-moz-translateY(' + scrollTop + 'px)' ,
transform : '-o-translateY(' + scrollTop + 'px)' ,
transform : '-ms-translateY(' + scrollTop + 'px)' ,
transform : 'translateY(' + scrollTop + 'px)' ,
})
})
});
</script>
</body>
</html>
说明：
一、colResizable-1.6.min.js 用于 拖拽表格列宽，不兼容ie8
二、jquery.tablesorter.js 用于 表格排序
三、表头固定时，IE9 和 Edge 会出现上下抖动的情况
01-12
785
785
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
