html - 表格内的可滚动 div

Question

我需要在表格单元格中放置一个可滚动的 div。表格应为 100% 高度。 div 有很多内容不适合屏幕，因此应该出现滚动。但我只希望 div 可以滚动，而不是整个页面。
如果我不使用表格，一切都是完美的:

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

div 是可滚动的，page 没有滚动条。但是如果它被包裹在一张 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>  

页面变得可滚动，而 div 不再是这样。我能做什么？

Answer 1

不应该是 height: 100%;和 overflow: auto;在 <td> ？