...

View Full Version : Nested tables and vertical-align:top?



NEExt
03-07-2005, 08:41 PM
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.



<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




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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum