css3表头固定，并自由拖拽列宽
来源：互联网 发布：.cn域名的ns记录 查询 编辑：程序博客网 时间：2024/06/10 17:31
一、功能要求：
1、表头固定
2、自由拖拽百变列宽
二、兼容问题：
chrome、google、360、ie11、ie10都能很好的兼容
ie9和edge滚动时，thead会上下抖动，不知大家有没有更好的解决办法
三、页面结构及功能：
<!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>
<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>
- css3表头固定，并自由拖拽列宽
- css3 translate实现表头固定
- 网页表格表头固定并可以自由拉伸列头的问题解决 (完美方案_html_table_seo)
- 【经典思维】table 表头固定，内容自由滚动
- 表头固定
- 固定表头
- 固定 表头
- 表头固定
- 固定表头
- 固定表头
- 表头固定
- 给DataGrid添加滚动条并固定表头
- 给DataGrid添加滚动条并固定表头
- 为表格添加竖直滚动条并固定表头
- 固定表头的CSS
- 固定表头的DataGrid
- js方式固定表头
- js固定表头补充
- Andorid--RecyclerView与CardView实现卡片列表
- 美斥$10亿巨资于伦敦九榆树打造！
- js获取html标签
- 加密解密工具类
- Spring中IoC和AOP的理解
- css3表头固定，并自由拖拽列宽
- LSTM Networks
- 【队内胡策 10.24 T3】洛圣都
- 购物车Recyclerview实现
- 导航条居中显示
- TCP/IP第三层--网络层
- Excel备忘
- vuex官方文档解读
- 367. Valid Perfect Square
