Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Nested tables and vertical-align:top?

    I'm designing a mostly CSS2 website, but I do use some tables for positioning within forms.

    I'm having a problem making my 2nd level tables stay at the TOP of my 1st level table. I want both header rows of each table to be horizontally aligned. It seems to me that valign should work (although that is probably depreciated at this pont). Anyway... I just want it to work.

    The code is not complete yet.. and i threw in a bunch of borders and valigns to help illustrate any problems.. but no luck. Thanks for any help you can provide.

    Code:
    <div>
          <table class="format" style="border:3px solid black;" valign="top"><tr><td>
          <table class="layout" valign="top"><th onmouseover="return escape('<h5>Enter the start time of the event</h5>')" colspan="2">Start Times</th>
          <tr><td>Shift</td><td><input type="text" size="15" maxlength="256" name="" value="" /></td></tr>
          <tr><td>1st Break</td><td><input type="text" size="15" maxlength="256" name="" value="" /></td></tr>
          <tr><td>2nd Break</td><td><input type="text" size="15" maxlength="256" name="" /></td></tr>  
          <tr><td>Lunch</td><td><input type="text" size="15" maxlength="256" name="" /></td></tr>
          <tr><td onmouseover="return escape('<h5>Check the box if the lunch is a full hour</h5>')">Hour?</td><td><input type="checkbox" name="" /></td></tr></table></td>   
    
          <td><table class="layout" valign="top"><th onmouseover="return escape('<h5>The employee with the changed schedule</h5>')" colspan="2">Employee</th>
          <tr><td>SEID</td><td><input type="text" size="15" maxlength="256" name="U_SEID" /></td></tr>
          <tr><td>Name</td><td><input type="text" size="15" maxlength="256" name="U_NAME" /></td></tr>
          <tr><td onmouseover="return escape('<h5>Two digit Aspect team number</h5>')" >Team #</td><td><input type="text" size="15" maxlength="256" name="U_NAME" /></td></tr>
        </table></td></tr>
        </table>
    </div>
    CSS
    Code:
    
    table.format {
      margin:5px;
      padding:5px;
      font-size:.9em;
      margin-bottom:40px;
      text-align:top;
      vertical-align:top;
      } 
    
    
    table.layout {
      margin:5px;
      padding:5px;
      font-size: .9em;
      } 
    
    table.layout th {
      color:white;
      background:#01706E;
      border:black 3px solid;
      padding:5px;
      }
    
    table.layout tr td {
      border:black 1px solid;
      padding:5px;
      }
    Last edited by NEExt; 03-07-2005 at 07:56 PM.


 

Posting Permissions

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