fung
03-14-2007, 03:19 PM
Hi,
Does anybody know how to freeze the header of table? I would like to do something similiar to excel where we can freeze the header and do the scrolling without moving the header. The following is my code:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Availability Report</title>
<style type="text/css">
.HeaderTd {
height: 30px;
width: 200px;
background-color: yellow;
}
.BodyTd {
height: 30px;
width: 200px;
overflow: auto;
background-color: lightgreen;
}
</style>
</head>
<body>
<table style="text-align: left; width: 1024px; height: 768px;" border="0" cellpadding="2" cellspacing="2" bgcolor="silver">
<tbody>
<tr>
<td style="height: 55px;"></td>
</tr>
<tr>
<td>
<div id="scrolltb" style="overflow: auto; width:1024px; height:620px">
<table style="text-align: left; width: 1019px; height: 569px;" border="1" cellpadding="10" cellspacing="2">
<thead>
<tr>
<td class="HeaderTd" style="width: 70px; text-align: center;">Range</td>
<td class="HeaderTd" style="height: 50px; text-align: center;">Tester ID</td>
<td class="HeaderTd" style="width: 10px; text-align: center;">Non-Schedule</td>
<td class="HeaderTd" style="text-align: center;">Unscheduled Downtime</td>
<td class="HeaderTd" style="text-align: center;">Scheduled Downtime</td>
<td class="HeaderTd" style="text-align: center;">Non-billable Engineering</td>
<td class="HeaderTd" style="text-align: center;">Billable Engineering</td>
<td class="HeaderTd" style="text-align: center;">Retest</td>
<td class="HeaderTd" style="text-align: center;">QA</td>
<td class="HeaderTd" style="text-align: center;">No WIP</td>
<td class="HeaderTd" style="text-align: center;">Idle</td>
<td class="HeaderTd" style="text-align: center;">First Pass</td>
</tr>
</thead>
<tbody>
<tr><td class="BodyTd">AAAAAAAAAAAAAAAAA</td>
<td class="BodyTd">BBBBBBBBBBBBBBBBBBBBB</td>
<td class="BodyTd">CCCCCCCCCCCCCCCCCCCC</td>
<td class="BodyTd">DDDDDDDDDDDDDDDDDDDDDD</td>
<td class="BodyTd">EEEEEEEEEEEEEEEEEEEEEEEEE</td>
<td class="BodyTd">FFFFFFFFFFFFFFFFFFFFFFFFFFFF</td>
<td class="BodyTd">GGGGGGGGGGGGGGGGGGGGG</td>
<td class="BodyTd">HHHHHHHHHHHHHHHHHHHHHHHHH</td>
<td class="BodyTd">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</td>
<td class="BodyTd">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</td>
<td class="BodyTd">KKKKKKKKKKKKKKKKKKKKKK</td>
<td class="BodyTd">LKKKKKKKKKKKKKKKKKKKK</td></tr>
<% end %>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Please advice.
Thanks.
Does anybody know how to freeze the header of table? I would like to do something similiar to excel where we can freeze the header and do the scrolling without moving the header. The following is my code:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Availability Report</title>
<style type="text/css">
.HeaderTd {
height: 30px;
width: 200px;
background-color: yellow;
}
.BodyTd {
height: 30px;
width: 200px;
overflow: auto;
background-color: lightgreen;
}
</style>
</head>
<body>
<table style="text-align: left; width: 1024px; height: 768px;" border="0" cellpadding="2" cellspacing="2" bgcolor="silver">
<tbody>
<tr>
<td style="height: 55px;"></td>
</tr>
<tr>
<td>
<div id="scrolltb" style="overflow: auto; width:1024px; height:620px">
<table style="text-align: left; width: 1019px; height: 569px;" border="1" cellpadding="10" cellspacing="2">
<thead>
<tr>
<td class="HeaderTd" style="width: 70px; text-align: center;">Range</td>
<td class="HeaderTd" style="height: 50px; text-align: center;">Tester ID</td>
<td class="HeaderTd" style="width: 10px; text-align: center;">Non-Schedule</td>
<td class="HeaderTd" style="text-align: center;">Unscheduled Downtime</td>
<td class="HeaderTd" style="text-align: center;">Scheduled Downtime</td>
<td class="HeaderTd" style="text-align: center;">Non-billable Engineering</td>
<td class="HeaderTd" style="text-align: center;">Billable Engineering</td>
<td class="HeaderTd" style="text-align: center;">Retest</td>
<td class="HeaderTd" style="text-align: center;">QA</td>
<td class="HeaderTd" style="text-align: center;">No WIP</td>
<td class="HeaderTd" style="text-align: center;">Idle</td>
<td class="HeaderTd" style="text-align: center;">First Pass</td>
</tr>
</thead>
<tbody>
<tr><td class="BodyTd">AAAAAAAAAAAAAAAAA</td>
<td class="BodyTd">BBBBBBBBBBBBBBBBBBBBB</td>
<td class="BodyTd">CCCCCCCCCCCCCCCCCCCC</td>
<td class="BodyTd">DDDDDDDDDDDDDDDDDDDDDD</td>
<td class="BodyTd">EEEEEEEEEEEEEEEEEEEEEEEEE</td>
<td class="BodyTd">FFFFFFFFFFFFFFFFFFFFFFFFFFFF</td>
<td class="BodyTd">GGGGGGGGGGGGGGGGGGGGG</td>
<td class="BodyTd">HHHHHHHHHHHHHHHHHHHHHHHHH</td>
<td class="BodyTd">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</td>
<td class="BodyTd">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</td>
<td class="BodyTd">KKKKKKKKKKKKKKKKKKKKKK</td>
<td class="BodyTd">LKKKKKKKKKKKKKKKKKKKK</td></tr>
<% end %>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Please advice.
Thanks.