Log in / Register

Forum › Bugs

styles not takeing on tables.

p_winch
I have the following html file I am trying to convert. Looks as it's supposed to on html,however, the top and bottom cells expand to who knows what when I convert it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PostCard Test</title>
</head>

<body>
<table border="0" cellpadding="2" cellspacing="0" style="width: 396px; height: 306px; background-image:url(background.jpg); background-repeat: no-repeat;">
<tr>
<td colspan="3" style="height: 18px;"></td>
</tr>
<tr>
<td style="width: 18px;"></td>
<td bgcolor="#FFFFFF" style="height: 230px;" valign="top">Hello</td>
<td style="width: 18px;"></td>
</tr>
<tr>
<td colspan="3" style="height: 55px;"></td>
</tr>
</table>
</body>
</html>
mikeday
Thanks, we'll take a look at this test document and see if we can figure out what is going on.
mikeday
This is due to the specified table height being divided up and used as a minimum row height. Removing the specified height from the table produces the correct layout, as the individual rows already have specified heights themselves.
Horba
I had run into a similar problem as above.

I wish to have a table of a certain size, the header and detail rows should be of a constant height and then the table should space fill to the bottom. At the moment this works.

                table {
                border-spacing:0px;
                cell-spacing:0px;
                cell-padding:0px;
                }
                td {
                    border-spacing:0px;
                    border-left: thin solid;
                    border-right: thin solid;
                    border-spacing:0px;
                }
                td.header {
                    height:1em;
                    border-bottom: thin solid;
                    border-top: thin solid;
                    
                }
                td.detail {
                    height:1em;
                }
                td.bottom {
                height:<!-- (table.height - header.height - #details * detail.height) -->10em;
                border-bottom: thin solid;
                }


Are there any work arounds to define a table height and then not have the row heights inherit the divisible min-height between them?

PS. Appologies for the necro, the search function proved very useful and wanted to leave a snippet for future searchers.
mikeday
I don't think this is possible, as vertical expand-to-fit is not supported in CSS. Perhaps in the future we can automate the height calculation with JavaScript, but this won't work yet.
Horba
mikeday wrote:
I don't think this is possible, as vertical expand-to-fit is not supported in CSS. Perhaps in the future we can automate the height calculation with JavaScript, but this won't work yet.


Ok. Thank you all the same mike.