您的位置：首页 > 其它

固定table的表头

2015-12-02 16:24 429 查看

原贴：http://blog.csdn.net/qq378527566/article/details/7786126

另可参考：http://blog.csdn.net/sl1202/article/details/7314667 根据固定表头的两种方式

固定表头两种方式:

1. 表头和表内容分别在两个table中, 互不干扰.

优点: 实现简单

缺点: 两个table 的列宽不好保持一致, 缺乏灵活性

2. 用标签的属性来处理

[html] view
plaincopy

<span style="font-size:18px;"><html>

<head>

<style type="text/css">

/*重点：固定行头样式*/

.scrollRowThead

{

position: relative;

left: expression(this.parentElement.parentElement.parentElement.parentElement.scrollLeft);

z-index:0;

}

/*重点：固定表头样式*/

.scrollColThead {

position: relative;

top: expression(this.parentElement.parentElement.parentElement.scrollTop);

z-index:2;

}

/*行列交叉的地方*/

.scrollCR {

z-index:3;

}

/*表格的线*/

.scrolltable

{

border-bottom:1px solid #CCCCCC;

border-right:1px solid #CCCCCC;

}

/*单元格的线等*/

.scrolltable td,.scrollTable th

{

border-left: 1px solid #CCCCCC;

border-top: 1px solid #CCCCCC;

padding: 5px;

}

</style>

</head>

<body>

<div style="height:200px; width:200px; border: 1px solid blue; overflow-y:auto; ">

<table border="0" cellpadding="3" cellspacing="0" class="scrolltable">

<tr class="scrollColThead" style="background-color:green;"><th class="scrollRowThead scrollCR">lie1</th><th>lie1</th></tr>

<tr><td class="scrollRowThead">content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

<tr><td>content</td><td>content</td></tr>

</table>

</div>

</body>

</html>

</span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航