一个可以锁定表头和表尾的style
这里可见效果
表头的行应用locked
tr.locked
{
position:relative;
top:
expression(document.getElementById("divgrid").scrollTop); /*IE5+
only*/
}
表尾的行应用lockedfoot
tr.lockedfoot
{
position:relative;
top:expression(
document.getElementById("divgrid").scrollHeight<=document.getElementById("divgrid").clientHeight)?
0
:
document.getElementById("divgrid").scrollTop-
(document.getElementById("divgrid").scrollHeight-document.getElementById("divgrid").clientHeight));
/*IE5+ only*/
}
这个用法只有IE5+支持，在Firefox
2.0里面没有用，表头和表尾还在老地方。
例子如下：
<head>
</head>
<body>
<div id="divgrid" style="width: 420px;height:
200px;overflow: auto;scrollbar-base-color:#ffeaff;">
<table class="Grid" cellspacing="0" rules="all"
UseAccessibleHeader="True" border="1" id="DataGrid1"
style="border-collapse:collapse;word-wrap: normal;;">
<tr style="background-color: navy;color:
white;border: 2px solid silver;position:relative;top:
expression(document.getElementById('divgrid').scrollTop-2);">
<td>Name</td><td>Address</td><td>City</td><td>State</td><td>Zip</td><td>Random
Babble</td>
</tr><tr>
<td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td>
</tr><tr>
<td
nowrap="nowrap">1</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">2</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">3</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">4</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">5</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">6</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">7</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">8</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">9</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">10</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">11</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr style="background-color:
navy; color: white;border: 2px solid
silver;position:relative;top:
expression((document.getElementById('divgrid').scrollHeight <=
document.getElementById('divgrid').clientHeight)?0:document.getElementById('divgrid').scrollTop-(document.getElementById('divgrid').scrollHeight-document.getElementById('divgrid').clientHeight));">
<td>Foot</td><td>Foot</td><td>Foot</td><td>Foot</td><td>Foot</td><td> </td>
</tr>
</table>
</div>
</body>
表头的行应用locked
tr.locked
{
position:relative;
top:
expression(document.getElementById("divgrid").scrollTop); /*IE5+
only*/
}
表尾的行应用lockedfoot
tr.lockedfoot
{
position:relative;
top:expression(
document.getElementById("divgrid").scrollHeight<=document.getElementById("divgrid").clientHeight)?
0
:
document.getElementById("divgrid").scrollTop-
(document.getElementById("divgrid").scrollHeight-document.getElementById("divgrid").clientHeight));
/*IE5+ only*/
}
这个用法只有IE5+支持，在Firefox
2.0里面没有用，表头和表尾还在老地方。
例子如下：
<head>
</head>
<body>
<div id="divgrid" style="width: 420px;height:
200px;overflow: auto;scrollbar-base-color:#ffeaff;">
<table class="Grid" cellspacing="0" rules="all"
UseAccessibleHeader="True" border="1" id="DataGrid1"
style="border-collapse:collapse;word-wrap: normal;;">
<tr style="background-color: navy;color:
white;border: 2px solid silver;position:relative;top:
expression(document.getElementById('divgrid').scrollTop-2);">
<td>Name</td><td>Address</td><td>City</td><td>State</td><td>Zip</td><td>Random
Babble</td>
</tr><tr>
<td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td><td
nowrap="nowrap">Head</td>
</tr><tr>
<td
nowrap="nowrap">1</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">2</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">3</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">4</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">5</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">6</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">7</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">8</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">9</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">10</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr>
<td
nowrap="nowrap">11</td><td nowrap="nowrap">ma la ge
bi</td><td nowrap="nowrap">圣诞节</td><td
nowrap="nowrap">shanghai</td><td
nowrap="nowrap">43230</td><td
nowrap="nowrap">adfkasdfasdfsdfa sadfa dfa aksdjfkasajskdfjaf
kasdjfakfjdfkjaklsdf adksfjkalsfd</td>
</tr><tr style="background-color:
navy; color: white;border: 2px solid
silver;position:relative;top:
expression((document.getElementById('divgrid').scrollHeight <=
document.getElementById('divgrid').clientHeight)?0:document.getElementById('divgrid').scrollTop-(document.getElementById('divgrid').scrollHeight-document.getElementById('divgrid').clientHeight));">
<td>Foot</td><td>Foot</td><td>Foot</td><td>Foot</td><td>Foot</td><td> </td>
</tr>
</table>
</div>
</body>
posted by sevevever @ 1:40:00 AM
0 comments
0 Comments:
Post a Comment
<< Home