首页 > 其他 > 详细

table锁定表头

时间:2016-07-29 17:06:05      阅读:390      评论:0      收藏:0      [点我收藏+]

本文介绍4种固定表头方式,效果如图:

技术分享

方式一、使用两个table,.tHead作为表头,tBody包含表体;

<style type="text/css">
*{margin:0; padding:0;}
table{width:100%; table-layout:fixed; border-collapse: collapse;}
tr{height:30px;}
th{text-align:left; background:#F0F1F2; border-bottom:1px solid #CCCDD1;} 
td{color:#666666; border-bottom:1px solid #CCCDD1;}
.tHead{position:fixed; left:0; top:0;}
.tBody{margin-top:30px;}
</style>
<table class="tHead">
    <tr>
        <th>title1</th>
        <th>title2</th>
        <th>title3</th>
        <th>title4</th>
        <th>title5</th>
    </tr>
</table>
        
<div class="tBody">
    <table>
        ......
    </table>
</div>

方式二:一个table

<table> 
      <thead> 
        <tr>
            <th>title1</th>
            <th>title2</th>
            <th>title3</th>
            <th>title4</th>
            <th>title5</th>
        </tr>
    </thead>
    <tbody>
        ......
    </tbody>
</table>
<style type="text/css">
*{margin:0; padding:0;}
table{border-collapse: collapse; width:100%; table-layout:fixed; margin:0 auto;}
tr{height:30px;}
th,td{border-bottom:1px solid #CCCDD1;}
thead{position:fixed; top:0px; display:table; width:100%; table-layout:fixed;}
thead tr th{background-color: #F0F1F2; border-top:1px solid #CCCDD1; text-align:left;}
tbody tr{display:table; width:100%; table-layout:fixed;}
tbody tr:first-child{margin-top:30px;}
</style>

方式三、一个table,只滚动tbody,滚动时copy一个表头显示在顶部

<style type="text/css">
*{margin:0; padding:0;}
table {border-collapse: collapse; width:100%; table-layout:fixed; margin:0 auto;}
table thead, table tbody tr {display:table; width:100%; table-layout:fixed;}
table thead{width:calc(100% - 1.5em);}
table tbody {display:block; height:300px; overflow-y:auto;}
tr{height:30px;}
th,td{border-bottom:1px solid #CCCDD1; text-align:center;}
</style>

技术分享

方式四、一个table,使用jquery插件jquery.freezeheader.js

<style type="text/css">
*{margin:0; padding:0;}
table{border-collapse: collapse; width:100%; table-layout:fixed; margin:0 auto;}
tr{height:30px;}
th{background:#F0F1F2;}
th,td{border-bottom:1px solid #CCCDD1; text-align:center;}
</style>

调用:

在顶部浏览器中创建一个固定的头表:$("table").freezeHeader();

用固定高度创建一个固定的头表:$("table").freezeHeader({ ‘height‘: ‘300px‘ });

滚动时,固定表头相对顶部位置:$("table").freezeHeader({ ‘offset‘: ‘50px‘ });

table锁定表头

原文:http://www.cnblogs.com/BlackElf/p/5718955.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!