13

作成中の Web ページに、ニュース イベント専用のセクションがあります。これらは現在、次のように単純に入力されています。

<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にdiv使用してラップしますoverflow-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 に答える