Height of the header keep changing

**fung** · 03-14-2007, 09:26 AM

Hi,

I am trying to fix the height and width of the header using css but to no avail.

Here is my code:

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

Can anyone enlighten me ?

Thanks.

**Twey** · 03-14-2007, 09:57 AM

Don't use tables for layout
Validate your page (HTML 4.01 Strict)
Don't use pixels for layout

**codeexploiter** · 03-14-2007, 10:06 AM

You have closed some tags that you didn't open in your source code. I've corrected that and they are in red color

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

You can apply the "topmargin" attribute if you want on the <body> tag.

**fung** · 03-14-2007, 03:13 PM

Hi,

So how can I fix the width and height of the header in my table? Appreciate if you can provide me the code.

Thanks.

Thread: Height of the header keep changing

Thread Tools

Search Thread

Height of the header keep changing

Bookmarks

Bookmarks

Posting Permissions