Log in

View Full Version : Looking for codes that can fix header


fung
03-14-2007, 09:29 AM
HI,

I am looking for codes in html or css that can fix the header when user try to scroll down the page. This is similiar to freeze pane function in excel where we can freeze the header.

Anyone can help me?

Thanks.
Twey
03-14-2007, 10:01 AM
Easy:

<style type="text/css">
div.header {
position: absolute;
top: 0;
height: 20&#37;;
width: 100%;
}

div.content {
position: absolute;
top: 0;
margin-top: 20%;
height: 80%;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="header">
<!-- Header stuff... -->
</div>
<div class="content">
<!-- Your content -->
</div>
</body>
mburt
03-14-2007, 10:22 AM
Might want to set the overflow on the body to hidden as well.
Twey
03-14-2007, 04:02 PM
No need, there is no overflow. 20&#37; + 80% = 100% :)
fung
03-15-2007, 02:11 AM
Hi,

I have a table inside the <div> tags. Does it matter?



<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;" 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>
<&#37; end %>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>