使简单网页的一部分具有自己的滚动条 [英] Make one section of simple web page have own scroll bar

问题描述

我有一部分专门用于新闻事件的网页。这些只是现在简单地输入如下。

 < tr> 
< td class =newsdate> 
 2013年2月
< / td> 
< td class =news> 
新闻项目1 
< / td> 
< / tr> 
 
< tr> 
< td class =newsdate> 
 2013年1月
< / td> 
< td class =news> 
新闻项目2 
< / td> 
< / tr> 
  

我想要这样，当列出的事件超过5个时，可以使用滚动条查看旧事件。这是新闻部分的高度将被固定，但您可以在其中上下滚动以查看更新和更旧的新闻。

div 使用 overflow-y：auto; 就像这样

HTML

 < div class =scrollable> 
 <！ - 您的桌子 - > 
< / div> 
  

CSS

  .scrollable {
 height：100px; / *或任何值* / 
 overflow-y：auto; 
} 
  

I have a section of the web page I am building that is dedicated to news events. These are simply entered as follows currently.

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

I would like to have it so that when there are more than 5 events listed, say, then you can use a scroll bar to see old events. That is the height of the news section will be fixed but you can scroll up and down within it to see newer and older news. How can you do this most simply?

解决方案

Wrap your table in a div using overflow-y: auto; like this

HTML

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

CSS

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

这篇关于使简单网页的一部分具有自己的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！