Table Row Height

kandersteg
7 Sep 2009

The table row height in some of our converted HTML documents is too big. Does anyone know how to compensate for this? - preferably using css.

Here is the HTML:

<TR>
<TD ALIGN="LEFT" VALIGN="BOTTOM">
Chesapeake Energy Corp. 2.5% 5/15/37 


</TD>
<TD ALIGN="JUSTIFY" VALIGN="BOTTOM">
 

</TD>
<TD ALIGN="LEFT" VALIGN="BOTTOM">
$ 1,300,000

</TD>
<TD ALIGN="LEFT" VALIGN="BOTTOM">
</TD>
<TD ALIGN="LEFT" VALIGN="BOTTOM">
$ 959,400


</TD>
</TR>

Thanks!

mikeday
8 Sep 2009

This is the correct behaviour, as you can see in Mozilla Firefox if you try a document like this:

<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>
<p>Paragraph</p>
</td>
</tr>
</table>
</body>
</html>

However, if you delete the first line, <!DOCTYPE html>, then the browser will trigger "quirks-mode" in which non-standard rendering behaviour is used. This is incompatible with the CSS specifications, as the margin on the paragraph is being incorrectly thrown away.

kandersteg
8 Sep 2009

Thanks Mike -

Unfortunately, we are not creating the html documents.

You are correct, at the beginning of the html document there is no <!DOCTYPE html> element.

So is the best way to deal with this to simply add "<!DOCTYPE html>" at the beginning of the html file?

Thanks

kandersteg

mikeday
8 Sep 2009

No, that will just make the row look bigger in the browser too, by enabling standards-compliance mode.

If you can't remove the paragraph tags, you could try adding some CSS to remove the margin from paragraphs inside table cells:

td > p { margin: 0 }

kandersteg
8 Sep 2009

Mike Thanks

Problem solved.

The "td > p { margin: 0 }" solution works great.

Regards,

kandersteg

Forum › How do I...?