html - 让一段简单的网页有自己的滚动条

Question

我正在构建的网页中有一部分专门用于新闻事件。目前简单的输入如下。

<tr>
    <td class="newsdate">
        February 2013
    </td>
    <td class="news">
        News item 1
    </td>
</tr>

<tr>
    <td class="newsdate">
        January 2013
    </td>
    <td class="news">
        News items 2
    </td>
</tr>

我想要这样，当列出的事件超过 5 个时，您可以使用滚动条查看旧事件。那就是新闻部分的高度将是固定的，但您可以在其中上下滚动以查看新旧新闻。如何最简单地做到这一点？

Answer 1

使用 overflow-y: auto; 将您的 table 包裹在 div 中

HTML

<div class="scrollable">
    <!-- Your table -->
</div>

CSS

.scrollable {
    height: 100px; /* or any value */
    overflow-y: auto;
}