<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>
|
