How to fit HTML table row to its content

Question

My <table> has three rows and columns, with the last table row like this:

<tr>
 <td colspan="3" align="center" valign="top" style="background-color: #eeeeee;">
  <hr class="vdivider">
  <div class="sitemap">There's an unordered list in here</div>
 </td>
</tr>

Now the odd thing that I can not figure out is that the <tr> is almost twice as high as its content. Both <hr> and <div> together sit quite nicely aligned to the top of the table row, and then there are almost 150px empty space to the bottom of the table. Padding and margin and border for all elements are 0, and there is not much other styling to the table or its rows/columns other than this:

html, body, table {
  width: 100%;
  height: 100%;
}

How can I make that table row fit the height of its content, and get rid of the big space at the bottom? I have assigned the height to the table here to make sure it stretches to the bottom of the window if the window is larger than the table would be. I assume that is where the overly large <tr> originates. To compensate for that stretch, I tried to add the extra <tr> above the sitemap with a min-height:100px; max-height:none; but that didn't help.

EDIT Fixed typos.

EDIT Maybe a little more background on this.

+--------------------------------+  browser window (html body)
| +----------------------------+ |
| |       banner image         | |  there is a banner image here that stretches across the page
| +----------------------------+ |
| | css menu bar               | |  a standard CSS menu built from ul
| +----------------------------+ |  this is where the table starts, it has three columns
| |  td   |  td           | td | |
| |       |               |    | |
| +----------------------------+ |
| | tr colspan=3 to make space | |  there's column to make space between content above and sitemap below
| +----------------------------+ |
| | tr colspan=3 for sitemap   | |  tr from above, the sitemap which stretches way down if table { height: 100%; }
| +----------------------------+ |
|                                |  this is the space in large windows when table has no height setting.
+--------------------------------+

Answer 1

Thank you for the feedback! Removing the table { height: 100%; } did not work because it doesn't stretch the table to the bottom of the page. This stretching is what I wanted, but I think this is also what caused the overly inflated <tr> which this question refers to.

The solution to this was more of an accident:

<tr style="height: 0;">
  ...
</tr>

With this, the row shrinks to the size of its content, while the table still stretches to the bottom of the page. Not sure if this is a "healthy" solution, but is sure works.