标签：pps order oct out function port type box ati
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>头部固定table</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width"/>
<style>
div,
table{
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border-spacing:0;
}
.m-tb-fit{
position: relative;
table-layout: fixed;
line-height: 1.5;
}
.m-tb-fit th,
.m-tb-fit td{
padding: 5px;
border: 1px solid #ddd;
}
.g-w600{
width: 600px;
}
.g-tb-fit{
width: 300px;
height: 500px;
overflow: hidden;
}
.g-tb-fit .g-tb-cont{
position: relative;
top: -1px;
overflow: auto;
height: 200px;
}
</style>
</head>
<body>
<div class="g-tb-fit">
<table class="m-tb-fit hd g-w600">
<thead>
<tr>
<th width="90">1</th>
<th width="90">22</th>
<th width="90">333</th>
<th width="90">4444</th>
<th width="90">55555</th>
<th>666666</th>
</tr>
</thead>
</table>
<div class="g-tb-cont">
<table class="m-tb-fit g-w600">
<tbody>
<tr>
<td width="90">111111</td>
<td width="90">22222</td>
<td width="90">3333</td>
<td width="90">444</td>
<td width="90">55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
<tr>
<td>111111</td>
<td>22222</td>
<td>3333</td>
<td>444</td>
<td>55</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function tabFitScroll(box, hd, cont) {
var _tb_box = box,
_tb_hd = hd,
_tb_cont = cont;
$(_tb_box + ‘ ‘ + _tb_cont).scroll(function () {
var $t = $(this);
$(_tb_box + ‘ ‘ + _tb_hd).css(‘left‘, -$t.scrollLeft());
});
}
$(function () {
tabFitScroll(‘.g-tb-fit‘, ‘.m-tb-fit.hd‘, ‘.g-tb-cont‘);
});
</script>
</body>
</html>
标签：pps order oct out function port type box ati
原文地址：http://www.cnblogs.com/vzane/p/6217861.html
