当前位置: 代码迷 >> Web前端 >> 结冰table的行和列
  详细解决方案

结冰table的行和列

热度:272   发布时间:2012-11-06 14:07:00.0
冻结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  
感谢分享
  相关解决方案