PDA

Click to See Complete Forum and Search --> : fixed height td

Ianl
02-21-2008, 04:18 AM
Alright folks - hope you're all well..


Got a bit of a problem with table layout so hopefully somebody can point me in the right direction.
I'm using a table with information in the first 2 columns and a description in the end column which takes up the entire column. I'd like only the bottom td's to expand if the description is larger than the table, like I've been able to manage in word:

http://img50.imageshack.us/img50/5703/tablecorrectfv6.jpg (http://imageshack.us)

Sadly when I've tried to replicate the same in html it stretches each table cell out instead of just the bottom one, like so:

http://img78.imageshack.us/img78/4062/tablewrongze2.jpg (http://imageshack.us)


Due to the nature of this, I can only use inline styles to format the layout of the the table. Is it possible to do this? I've tried using max-height but it hasn't helped. I can post the code up that I've used if that'll help.
Ianl
02-21-2008, 04:43 AM
Here is the code for the table: I know it's fairly large but thought i'd post it up in full in case you want a proper look at it...



<table style='width:'756; border='1' cellspacing='0'>
<tr><td style='width: 23%; max-height:15px; background-color: #dddddd; border-top: silver thin solid; border-left: silver thin solid;
border-bottom: silver thin solid;'> <strong><span style='font-size: 10pt; font-family: Verdana'>Job No/Progress No:</span>
</strong><em></em>
</td>
<td style='width: 25%; max-height:15px; background-color: #dddddd; border-top: silver thin solid; border-left: silver thin solid;
border-bottom: silver thin solid;'><a href='##LINK##'><span style='font-size: 10pt; font-family: Verdana'>##JOBNO##/##PROGID##
</span></a>
</td>
<td rowspan='8' style='width: 52%; border-right: silver thin solid; border-top: silver thin solid; border-left: silver thin solid;
border-bottom: silver thin solid; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; padding-top: 5px;'>&nbsp;
<span style='font-size: 10pt; font-family: Verdana'>##DESCRIPTION##</span>
</td></tr>
<tr><td style='width: 23%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver
thin solid;'> <strong><span style='font-size: 10pt; font-family: Verdana'>From:</span></strong>
</td>
<td style='width: 25%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver
thin solid;'><span style='font-size: 10pt; font-family: Verdana'>##FROM##</span>
</td></tr>
<tr><td style='width: 23%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver
thin solid;'> <strong><span style="font-size: 10pt; font-family: Verdana">To: </span></strong>
</td> <td style='width: 25%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom:
silver thin solid;'><span style='font-size: 10pt; font-family: Verdana'>##MAIN##</span>
</td></tr>
<tr><td style='width: 23%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver
thin solid;'> <strong><span style='font-size: 10pt; font-family: Verdana'>Type: </span></strong>
</td>
<td style='width: 25%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver
thin solid;'>&nbsp;<span style='font-size: 10pt; font-family: Verdana'>##TYPE##</span>
</td> </tr>
<tr> <td style='width: 23%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver
thin solid;'> <strong><span style='font-size: 10pt; font-family: Verdana'>Date: </span></strong> </td>
<td style='width: 25%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver
thin solid;'>&nbsp;<span style='font-size: 10pt; font-family: Verdana'>##DATEFROM##</span>
</td> </tr>
<tr> <td style='width: 23%; max-height:15px; background-color: #dddddd; border-left: silver thin solid;
border-bottom: silver thin solid;'> <strong><span style='font-size: 10pt; font-family: Verdana'>Required: </span></strong>
</td>
<td style='width: 25%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver thin
solid;'>&nbsp;<span style='font-size: 10pt; font-family: Verdana'>##DATEREQ##</span></td> </tr>
<tr> <td style='width: 23%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver thin
solid;'> <strong><span style='font-size: 10pt; font-family: Verdana'>CC: </span></strong> </td>
<td style='width: 25%; max-height:15px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver thin
solid;'>&nbsp;<span style='font-size: 10pt; font-family: Verdana'>##CC##</span></td> </tr>
<tr> <td style='width: 23%; max-height:200px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver thin
solid;'> <strong><span style='font-size: 10pt; font-family: Verdana'> </span></strong> </td>
<td style='width: 25%; max-height:200px; background-color: #dddddd; border-left: silver thin solid; border-bottom: silver thin
solid;'>&nbsp;<span style='font-size: 10pt; font-family: Verdana'></span></td> </tr>
</table>
Death
02-21-2008, 08:33 AM
Using tables for a layout is a bad idea. Do you have a test site if so please post a link. If not please edit your post and add code tags it's annoying to try and read that jumbled up mess.

Thanks, Death
WebJoel
02-21-2008, 06:34 PM
<table style='width:'756; border='1' cellspacing='0'> You have a problem here.

This should be:

<table style="width:756px;" border='1' cellspacing='0'> There could be more such.

Note that the quote (double or single, either is fine so long as you maintain parity), belongs around the entire "selector-declaration:value" Be sure to indicate a 'unit of measure' when using CSS, inline, etc. Browsers probably assume "px", but if you mean to use "em" or "pc" or "pt" or "cm" (etc.), you have a page-busting event going on that validates correctly, *but* still messes-up your intended layout...
ray326
02-21-2008, 10:28 PM
You'd be a lot better off using a DL to mark up that left hand information.
Ianl
02-22-2008, 02:47 AM
You have a problem here.

This should be:

There could be more such.

Note that the quote (double or single, either is fine so long as you maintain parity), belongs around the entire "selector-declaration:value" Be sure to indicate a 'unit of measure' when using CSS, inline, etc. Browsers probably assume "px", but if you mean to use "em" or "pc" or "pt" or "cm" (etc.), you have a page-busting event going on that validates correctly, *but* still messes-up your intended layout...


Cheers - I checked to see if moving that quote made any difference but sadly not.
I'll check over the rest of it for consistency.
Ianl
02-22-2008, 02:52 AM
You'd be a lot better off using a DL to mark up that left hand information.


Possibly. Ideally though, i'd like to find a solution to this problem, but if I can't then i may well do that.
Ianl
02-22-2008, 02:55 AM
Using tables for a layout is a bad idea. Do you have a test site if so please post a link. If not please edit your post and add code tags it's annoying to try and read that jumbled up mess.

Thanks, Death


Cheers death - I'm aware that using tables for layout isn't the best, but this is just for a recurring information table within a page, not for the page itself.
Ianl
02-22-2008, 05:31 AM
Cheers for putting it in code tags for me by the way, WebJoel. It wasn't letting me edit my post.
ray326
02-22-2008, 02:13 PM
At the very least you should factor out all the embedded presentation and use both th and td appropriately. Then you might actually be able to see the content and understand what's really needed. E.g.,

<table style='width: 756px;' border='1' cellspacing='0'>
<tr>
<th>Job No/Progress No:</th>
<td><a href='##LINK##'>##JOBNO##/##PROGID##</a></td>
<td rowspan='8'>##DESCRIPTION##</td>
</tr>
<tr>
<th>From:</th>
<td>##FROM##</td>
</tr>
<tr>
<th>To:</th>
<td>##MAIN##</td>
</tr>
<tr>
<th>Type:</th>
<td>##TYPE##</td>
</tr>
<tr>
<th>Date:</th>
<td>##DATEFROM##</td>
</tr>
<tr>
<th>Required:</th>
<td>##DATEREQ##</td>
</tr>
<tr>
<th>CC:</th>
<td>##CC##</td>
</tr>
<tr height="400">
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

From there you can fiddle the presentation accordingly in a separate style sheet.
Ianl
02-27-2008, 10:53 AM
Alright folks - turns out i was making it far too complicated for myself.

I ended up creating a table with 1 tr/2 td's. I nested a table with the information in the left columns in the first td and put the field with the description in the other. Works a treat now.

Thanks for all your help...