结冰table的行和列 _Web前端

冻结table的行和列
最近项目中发现talbe的列或者行太多展示不方便，需要冻结，网上找了找资料，实现了；在这给大家分享;

给一个例子冻结一列：

<html>
<head>
    <title>Table列冻结</title>
<style type="text/css">
<!--
.scrollSpanX
{
vertical-align: top;
overflow-x: scroll;
text-align: left;
border: 1px solid;
}
.scrollSpanX TABLE
{
table-layout: fixed;
}
.scrollBodyX TR
{
position: relative;
}
.scrollBodyX TD
{
position: relative;
border-right: 1px solid;
border-bottom: 1px solid;
text-align: center;
word-break:break-all;
width: 128px;
}
.scrollFixedRowX TD
{
position: relative;
font-weight: bold;
background-color: #E9E9E9;
}
.scrollFixedColX
{
position: relative;
left: expression(this.parentElement.offsetParent.scrollLeft);
background-color: #E9E9E9;
z-index: 1;
}
-->
</style>
</head>
<body>
<div class="scrollSpanX" style="height:190px; width:640px;">
<table class="scrollBodyX" border="0" align="left" cellpadding="2" cellspacing="0">
    <thead class="scrollFixedRowX">
      <tr>
        <td align="center" nowrap class="scrollFixedColX">序号</td>
        <td align="center" nowrap> Test1</td>
        <td nowrap> Test2</td>
        <td nowrap> Test3</td>
        <td nowrap> Test4</td>
        <td nowrap> Test5</td>
        <td nowrap> Test6</td>
      </tr>
    </thead>
    <tbody id="tblListBody">
      <tr>
        <td align="center" class="scrollFixedColX">001</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center" >Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">002</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center" >Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">003</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center" >Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">004</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center" >Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">005</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">006</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">007</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">008</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
      <tr>
        <td align="center" class="scrollFixedColX">009</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
        <td align="center">Test</td>
      </tr>
    </tbody>
</table>
</div>
</body>
</html>

另外还有一个冻结行和列的例子供大家参考；
一个jquery的例子参考：http://blog.csdn.net/digyso888/archive/2010/10/22/5959228.aspx

1 楼 guoweijian 2012-06-18

灰常感谢，急需这样的例子。。。

2 楼 linzixiao 2012-07-03

感谢分享