CODEWITHSUNDEEP
htmlcsshtml-tabletablelayout
Thomas Sparber
Thomas Sparber

Reputation: 2917

HTML table dynamic height for one cell

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

Upvotes: 3

Views: 27288

Answers (1)

divy3993
divy3993

Reputation: 5810

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.

Upvotes: 1

Related Questions