首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

结冰table的行和列

2012-11-06 
冻结table的行和列最近项目中发现talbe的列或者行太多展示不方便,需要冻结,网上找了找资料,实现了;在这给

冻结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              感谢分享  

热点排行