今天做了一个table表格，在互联网日益发展的路途当中，为了遍历操作人员，绞尽脑汁把一切功能制作成时候人脑子思维的东西，当在做数据表格展示的时候，少量数据我们直接一个table便可以实现，但是当数据分类较多的时候我们在滑动的时候还有看到上面对应的头信息那么我们就需要把头部固定起来以便达到我们的要求我们要做的如下图：
父容器div内包裹着4个table（1，2，3，4）
要滚动的部位是body部也就是最大那个圈，左边的圈为固定列展示，左侧列分为thead和tbody，头部对应
还有js的应用
html代码
<div class="zmz-table-box"><!--//包裹盒子-->
<div class="zmz-table-header"><!--//盒子头部-->
<table class="zmz-table-thead" cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
<col width="200"/>
</colgroup>
<tr>
<th><div class="header">用户名</div></th>
<th><div class="header">密码</div></th>
<th><div class="header">性别</div></th>
<th><div class="header">年龄</div></th>
<th><div class="header">父母</div></th>
<th><div class="header">子女</div></th>
<th><div class="header">籍贯</div></th>
<th><div class="header">工作</div></th>
<th><div class="header">出生日期</div></th>
<th><div class="header">消息</div></th>
<th><div class="header">登录时间</div></th>
<th><div class="header">ip</div></th>
<th><div class="header">最后登录时间</div></th>
<th><div class="header">登录次数</div></th>
<th><div class="header-right"></div></th>
</tr>
</table>
<div class="zmz-scroll-17">
</div>
</div>
<div class="zmz-table-body"><!--//盒子身子-->
<div class="zmz-table-body-top">
<table class="zmz-table-tbody" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="body">张三</div></td>
<td><div class="body">admin</div></td>
<td><div class="body">男</div></td>
<td><div class="body">13</div></td>
<td><div class="body">佳文管-郏文璇</div></td>
<td><div class="body">张小三</div></td>
<td><div class="body">河北</div></td>
<td><div class="body">web</div></td>
<td><div class="body">2018-9-9</div></td>
<td><div class="body">无</div></td>
<td><div class="body">2018-8-8 12:12:12</div></td>
<td><div class="body">255.255.255.255</div></td>
<td><div class="body">2018-9-9 20:20:20</div></td>
<td><div class="body">100</div></td>
</tr>
此处添加多个tr/td
</table>
</div>
</div>
<div class="zmz-table-body-fixed-left"><!--//左边浮动-->
<div class="zmz-table-body-fixed-left-thead">
<table border="0" cellspacing="0" cellpadding="0" class="zmz-fixed-table-thead">
<tr>
<th>
<div class="body">编号</div>
</th>
</tr>
</table>
</div>
<div class="zmz-table-body-fixed-left-tbody">
<table border="0" cellspacing="0" cellpadding="0" class="zmz-fixed-table-tbody">
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
<tr>
<td><div class="body">101011</div></td>
</tr>
</table>
</div>
</div>
<div class="zmz-table-body-fixed2"></div><!--//右边浮动-->
</div>css代码
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.zmz-table-box{
width: 900px;
height: 300px;
margin: 100px;
position: relative;
}
.zmz-table-header{
overflow-x: hidden;
width: 100%;
position: relative;
z-index: 9;
}
.zmz-table-thead{
background: #cc2b39;
color: #fff;
padding: 5px 10px;
}
.zmz-table-thead tr th{
border: 1px solid #dfdbdb;
}
.header,.body{
width: 200px;
}
.zmz-table-body{
overflow: hidden;
}
.zmz-table-body-top{
overflow: auto;
height: 400px;
}
.zmz-table-tbody{
padding: 5px 10px;
background: #eee;
color: #555;
}
.zmz-table-tbody tr {
padding: 5px 0;
display: inline-block;
}
.zmz-table-tbody tr td{
border: 1px solid #dfdbdb;
}
.header-right{
width: 17px;
background: #007AFF;
}
.zmz-table-body-fixed-left{
position: absolute;
top: 0;
left: 0;
width: 212px;
background: #cc2b39;
z-index: 9999;
}
.zmz-table-body-fixed-left-thead{
overflow: hidden;
padding: 5px 0 5px 12px;
}
.zmz-fixed-table-thead{
color: #fff;
width: 100%;
}
.zmz-table-body-fixed-left tr th{
border: 1px solid #dfdbdb;
}
.body{
width: 200px;
}
.zmz-table-body-fixed-left-tbody{
background: #cc2b39;
color: #fff;
overflow: hidden;
height: 383px;
}
.zmz-fixed-table-tbody{
color: #fff;
padding: 5px 0;
padding-left: 10px;
}
.zmz-fixed-table-tbody tr{
padding: 5px 0;
display: inline-block;
}
.zmz-fixed-table-tbody tr td{
border: 1px solid #dfdbdb;
}
.zmz-scroll-17{
position: absolute;
right: 0;
top: 0;
width: 17px;
height: 100%;
background: #cc2b39;
}
</style>js代码
<script type="text/javascript">
var $tableHead = $('.zmz-table-header');
var $tableBody = $('.zmz-table-body-top');
var $tablefixed= $('.zmz-table-body-fixed-left-tbody')
/*设置同步横向滚动*/
$tableBody.scroll(function (ev) {
$tableHead.scrollLeft($tableBody.scrollLeft()); // 横向滚动条
$tablefixed.scrollTop($tableBody.scrollTop()); // 横向滚动条
});
</script>兼容性到ie7，具体兼容还要在生成环境当中去测试
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
