CODEWITHSUNDEEP
htmlcss
Jens
Jens

Reputation: 9130

How to fit HTML table row to its content

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

Upvotes: 12

Views: 61276

Answers (4)

Jens
Jens

Reputation: 9130

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.

Upvotes: 12

user2503973
user2503973

Reputation:

http://jsfiddle.net/9jMR8/ Maybe like this? Changed the bg-color of the div..

Changed the css like this:

html, body{
width: 100%;
height: 100%;
}
table{
border:1px solid black;     
width:100%;
}
div{
background-color:blue;
}

Upvotes: 0

maqjav
maqjav

Reputation: 2434

Once that you fix your tags and close them properly you will see that the TR height is that big because UL margins are stretching it, if you modify the CSS for this tag it will be smaller check it here

ul {
    margin: 0;
    padding: 0;
}

For other side like your table has only 1 row, if you add the style height: 100% to the table, that row will stretch to the maximum, you can modify the style to leave it like this check it

table {
    width: 100%;
}

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85528

remove height

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

and it looks like this (no more overhead in <tr> height)

enter image description here

Why 100% height on html and body anyway? Also, I would change There's a <ul> here to There's a &lt;ul> here

Upvotes: 2

Related Questions