HTML table dynamic height for one cell - html

Question

Is it possible to have a table that distributes the cell heights like the following?
______________________________________
| fixed height |
|____________________________________|
| |
| |
| dynamic height |
| |
|____________________________________|
| fixed height |
|____________________________________|
So the height of the first and the last cells are fixed, the center cell should be dynamic and scrollable.
Currently I have the following code but it doesn't work:
<table style="max-height:200px">
<tr>
<td height="30px">First element</td>
</tr>
<tr>
<td>
<!-- Div for scroll functionality if content is too high -->
<div style="overflow:auto">
Dynamic content which needs to be scrolled sometimes
</div>
</td>
</tr>
<tr>
<td height="30px">last element</td>
</tr>
</table>
EDIT: it doesn't need to be a table it is just important that the center element has a dynamic height and is scrollable
EDIT: I know that I can specify the height of the element to be scrolled - then it works. But I want the height of the element to be dynamic

Answer 1

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.