使一段简单的网页有自己的滚动条

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?

我想拥有它,以便当列出超过5个事件时,您可以使用滚动条查看旧事件。这是新闻部分的高度将被修复,但你可以在其中向上和向下滚动以查看更新和更旧的新闻。你怎么能这么简单地做到这一点?

5 个解决方案

#1

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

使用overflow-y:auto;将表包裹在div中像这样

HTML

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

CSS

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

#2

Use CSS:

.scrollbar {
  height: 100px;
  overflow: auto; // here is the magic :)
}

#3

If your news events are wrapped in a <table id="news">, then your CSS would look like this:

如果您的新闻事件包含在

中,那么您的CSS将如下所示:

#news {
    height: 200px;
    overflow-y: auto;
}

#4

Place your table inside a DIV element and specify a height, like this:

将表放在DIV元素中并指定高度,如下所示:

<div style="height:400px;overflow:auto">
   <table>....</table>
</div>

It will be automatically scrolled if needed

如果需要,它将自动滚动

#5

HTML example markup:

HTML示例标记:

  <ul id="container">
    <li>Article 1</li>
    <li>Article 2</li>
    <li>Article 3</li>
    <li>Article 4</li>
    <li>Article 5</li>
    <li>Article 6</li>
    <li>Article 7</li>
    <li>Article 8</li>
  </ul>

and CSS:

ul#container {
    height: 100px; 
    overflow-y: auto;
}

http://jsfiddle.net/UvsrY/4/

#1