您的位置：首页 > Web前端 > CSS

利用CSS+DIV来固定table的行和列

2011-12-09 14:45 281 查看
通过CSS和DIV实现一个表格出横纵向滚动条，并且让指定的列固定。多余的话就不说了，代码如下。

<html>

<head>

<title></title>

<style type="text/css">

.Freezing {

z-index: 10;

position: relative;

top: expression(this.offsetParent.scrollTop)

}

.FreezingCol {

z-index: 1;

left: expression(document.getElementById("freezingDiv").scrollLeft);

position: relative

}

</style>

</head>

<body>

<div id="freezingDiv" style="overflow:auto; width:400px; height:155px">

<table cellspacing="0" cellpadding="4" rules="all" bordercolor="#3366CC" border="1" id="DataGrid1" style="background-color:White;border-color:#3366CC;border-width:1px;border-style:None;width:900px;border-collapse:collapse;">

<tr class="Freezing" style="color:#CCCCFF;background-color:#003399;font-weight:bold;">

<td class="FreezingCol">ID</td>

<td class="FreezingCol">姓名</td>

<td>年龄</td>

<td>电话</td>

<td>性别</td>

<td>住址</td>

</tr>

<tr style="color:#003399;background-color:White;">

<td class="FreezingCol">

<span>1</span>

</td>

<td class="FreezingCol">

<span>张三</span>

</td>

<td>29</td>

<td>0000000000000</td>

<td>男</td>

<td>北京</td>

</tr>

<tr style="color:#003399;background-color:White;">

<td class="FreezingCol">

<span>1</span>

</td>

<td class="FreezingCol">

<span>李四</span>

</td>

<td>29</td>

<td>0000000000000</td>

<td>男</td>

<td>上海</td>

</tr>

<tr style="color:#003399;background-color:White;">

<td class="FreezingCol">

<span>1</span>

</td>

<td class="FreezingCol">

<span>王五</span>

</td>

<td>50</td>

<td>0000000000000</td>

<td>男</td>

<td>上海</td>

</tr>

<tr style="color:#003399;background-color:White;">

<td class="FreezingCol">

<span>1</span>

</td>

<td class="FreezingCol">

<span>赵六</span>

</td>

<td>29</td>

<td>0000000000000</td>

<td>男</td>

<td>上海</td>

</tr>

<tr style="color:#003399;background-color:White;">

<td class="FreezingCol">

<span>1</span>

</td>

<td class="FreezingCol">

<span>赵七</span>

</td>

<td>29</td>

<td>0000000000000</td>

<td>男</td>

<td>上海</td>

</tr>

</table>

</div>

</body>

</html>
这种方式在数据很多的时候，拖动页面滚动条的时候很慢。

转自：/article/11690017.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航