13

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

<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 个时，例如，您可以使用滚动条查看旧事件。那就是新闻部分的高度将被固定，但您可以在其中上下滚动以查看更新和较旧的新闻。你怎么能最简单地做到这一点？

4

5 回答 5

29

像这样使用table_divoverflow-y: auto;

HTML

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

CSS

.scrollable {
    height: 100px; /* or any value */
    overflow-y: auto;
}
于 2013-01-17T13:48:25.437 回答
3

使用 CSS：

.scrollbar {
  height: 100px;
  overflow: auto; // here is the magic :)
}
于 2013-01-17T13:47:47.213 回答
2

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>

和 CSS：

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

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

于 2013-01-17T13:53:22.807 回答
1

如果您的新闻事件被包裹在 中<table id="news">，那么您的 CSS 将如下所示：

#news {
    height: 200px;
    overflow-y: auto;
}
于 2013-01-17T13:48:28.960 回答
1

将表格放在 DIV 元素中并指定高度，如下所示：

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

如果需要，它将自动滚动

于 2013-01-17T13:49:32.177 回答