Results 1 to 4 of 4

Thread: Height of the header keep changing

  1. #1
    Join Date
    Mar 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking Height of the header keep changing

    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.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    • Don't use tables for layout
    • Validate your page (HTML 4.01 Strict)
    • Don't use pixels for layout
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •