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.

Set height:100% on the second row.

<div class="row">
        <div>Some text</div>
        <div>Text again</div>
    </div>
    <div class="row last">
        <div>Need height to bottom</div>
    </div>

CSS

.row {
    display: table-row;
    border: 1px solid black;
}
.last
{
    height: 100%;
}

FIDDLE

try this:

.topics tr { line-height: 14px; }

You might want this:

1) I gave height:auto to table, and here width:80% to table is optional.

2) The Div inside td is given height:60px;(just random to bring up scroll-bar), along with overflow:auto;.

3) The first and second td's have specific height:30px;

Check this out:

<table style="height:auto; width:80%;" border=1>
    <tr>
        <td height="30px">First element</td>
    </tr>
    <tr>
        <td>
            <!-- Div for scroll functionality if content is too high -->
            <div style="overflow:auto; height: 60px;">
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
            </div>
        </td>
    </tr>
    <tr>
        <td height="30px">last element</td>
    </tr>
</table>

Update : No Specific Height

Here in a update i used max-height

<table style="height:auto; width:75%; margin:0px auto;" border=1>
    <tr>
        <td height="30px">First element</td>
    </tr>
    <tr>
        <td>
            <!-- Div for scroll functionality if content is too high -->
            <div style="overflow:auto; max-height:100px;">
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
            </div>
        </td>
    </tr>
    <tr>
        <td height="30px">last element</td>
    </tr>
</table>

Note: If you want to use % for max-height give height and width equals 100% to your body.

I solved it using a "height: 100%" in both css and HTML Codes for the table cells and erasing the HTML declaration. With no Doctype, the table cell acting like a sidebar does what you need it to do (in this case, "adjust" to user's screen resolution no matter the height of the contents in the table)

Hope this can help someone.

See ya!

Please check out this article i have below. You should not be using tables to layout or grid up your pages as you have done.

http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Also just a hint as well, you shouldn't be using inline CSS styles it is very bad practice and makes modifying templates and pages very difficult in the future so use classes and a stylesheet to define any styles and/or layouts for yout pages. They are more dynamic and much easier to fix later on.

Demo of clean coding for you here: http://jsfiddle.net/nshJH/

Using <div>'s you can just use the

float: xxxx;
clear: xxxx;

This is a simple example of a clean fluid page for you that is dynamic to the content it contains. Also please note that i can change any of the width or text properties on the fly through one place in my CSS...

Tyipcally, a table will inherit the height of the content provided that the columns have a defined width using either percentage of the total table width or absolutel pixel "px" definitions. IN addition, be sure that the table rows do not have a specified height i.e. 'height: 30px'.

Code Solution:

Copytable {
  width: 700px;
}
table tr td {
  width: 350px;
  height: auto;
}

I had the same problem with an HTML table containing only images. After changing the doctype to HTML 5, Chrome, Firefox and IE displayed the table cells with a height larger than the image whereas before the cells were just as big as the images they contained.

It seems that for HTML 5 the browsers will size the table cells no smaller than your font-size and line-height would allow for text content. So to achieve the same look as before I used the following inline CSS rules:

<table style="font-size: 1px; line-height: 0;">
...
</table>