How To Fit HTML Table Row To Its Content - Stack Overflow

Trang chủ » Html Table Row Height Stretch » How To Fit HTML Table Row To Its Content - Stack Overflow

Có thể bạn quan tâm

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. +--------------------------------+

Từ khóa » Html Table Row Height Stretch