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