读书人

结冰table的行和列

发布时间: 2012-11-06 14:07:00 作者: rapoo

冻结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 style="height:190px; width:640px;"><table border="0" align="left" cellpadding="2" cellspacing="0">    <thead nowrap 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" >Test</td>      </tr>      <tr>        <td align="center" >Test</td>      </tr>      <tr>        <td align="center" >Test</td>      </tr>      <tr>        <td align="center" >Test</td>      </tr>      <tr>        <td align="center" />     2 楼    linzixiao    2012-07-03              感谢分享  

读书人网 >Web前端

热点推荐