Scrollable div inside table

Question

I need to put a scrollable div in a table cell. The table should be 100% high. The div has a lot of content that doesn't fit on the screen, so scroll should be displayed. But I only want to scroll through the div , not the entire page.
If I do not use a table, everything is perfect:

<div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;  border-style: solid;">
    <div>
       Item 1<br/>
       Item 2<br/>
       ...
       Item 300<br/>
    </div>
</div>

The div scrolls, the page does not have a scroll bar. But if it is wrapped in a table:

<table style="height: 100%">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: auto; border-width: 1px;
                border-style: solid;">
                <div>
                   Item 1<br/>
                   Item 2<br/>
                   ...
                   Item 300<br/>
                </div>
            </div>
        </td>
    </tr>
</table>  

the page becomes scrollable, and the div ceases to be one. What can I do?

Answer 1

There should not be height: 100%;and overflow: auto;on <td>?

Answer 2

, , , div 100% , , , % .

div .

:

<table height="2000px">
    <tr>
        <td>
            <div style="height: 100%; width: 100px; padding: 5px; overflow: scroll; border: 1px solid #000;">
                Item 1<br/>
                Item 2<br/>
                ...<br/>
                Item 300<br/>
            </div>
        </td>
    </tr>
</table>

div, - .

, - CSS ( ), , div 100% , , .

, , - , divs 100% , CSS Javascript- .

Answer 3

, , div , , , div, div .

You need to use divs, not tables.

Answer 4

You must change the css property of the table-layout to a "fixed" value.

<table style="table-layout: fixed; width: 100%;">
    <tr>
        <td>
            <div style="overflow: scroll;">
                Scrollable div
            </div>
        </td>
    </tr>
</table>