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:

Code:

  <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% + 80% = 100%

**fung** · 03-15-2007, 02:11 AM

Hi,

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

HTML 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;" 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>

Thread: Looking for codes that can fix header

Thread Tools

Search Thread

Looking for codes that can fix header

Bookmarks

Bookmarks

Posting Permissions