I am having a problem where an extra gap (whitespace, padding) appears
in a table cell where I don't want it. The data fed in the table is
via dynamic HTML, so the amount in the middle cell may vary. When the
data in the middle table cell is little and that cell's height is
small, an unwanted gap appears in the first table cell. I would prefer
to have all additional blank space at the bottom of the table (last
row) and not have any in the top row.
I don't know how to get rid of the unwanted padding in the first row,
and have it all appear in the last row.
Here is the HTML, Tom
<html>
<head>
<title>Test</title>
</head>
<body>
<p>Trying to solve problem when too little messages in Message
Console row (loaded by
JavaScript) causes a gap to appear in the botttom of the 24 Hour
section (before the
Left Hotspot and Message Console row).</p>
<table border="1px" width="100%" >
<tr>
<td valign="top" colspan="2" width="780" style="vertical-align:
top; padding-bottom: 0px;" >
<p style="background-color: cyan; padding-bottom: 0px; "24 Hour
Section - Do not want
any padding/white area between here and console.
</p>
</td>
<td valign="top" rowspan="2" width="220px" ><p
style="background-color: cyan;">Right Hotspot</p>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<p>Any padding after here is okay</p>
</td>
</tr>
<tr valign="top">
<td valign="top" width="220px"><p style="background-color:
cyan;">Left Hotspot</p>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<h1>Future Stuff</h1>
<p>Any empty padding after here is okay</p>
</td>
<td valign="top" width="804" >
<table width="100%">
<tr><td><p style="background-color: cyan;">Message
Console</p></td></tr>
<tr><td style="background-color: #8888ff;">Message # 4</td></tr>
<tr><td style="background-color: #ffbb88;">Message # 3</td></tr>
<tr><td style="background-color: #8888ff;">Message # 2</td></tr>
<tr><td style="background-color: #ff8888;">Message # 1. Any padding
after here is okay.</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
