css3表头固定，并⾃由拖拽列宽
<!DOCTYPE html>
<html>
<head>
<style>
.table-wrap{ height : 200px; max-height:200px; overflow-y: scroll }
.table {width :99% }
.table thead th { background-color:#ddd; }
</style>
<script src="jquery-1.8.3.min.js"></script>
<script src="colResizable-1.6.min.js"></script>
<script>
$(function(){
// 表格列⾃由拖拽
$(".table").colResizable({
liveDrag:true,
draggingClass:"dragging",
resizeMode:'overflow'
});
// 表头固定
$('.table-wrap').on('scroll', function(){
var scrollTop = $(this).scrollTop();
$('.table').find('thead tr th').css({
'-webkit-transform' : '-webkit-translateY(' + scrollTop + 'px)' ,
'-mox-transform' : '-moz-translateY(' + scrollTop + 'px)' ,
'-ms-transform' : '-o-translateY(' + scrollTop + 'px)' ,
'-o-transform' : '-ms-translateY(' + scrollTop + 'px)' ,
transform : 'translateY(' + scrollTop + 'px)'
});
});
});
</script>
</head>
css固定定位
<body>
<div class="table-wrap">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">5</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">6</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">7</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">9</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">10</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">11</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">12</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">13</th>                          <td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
<table>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。