Make one section of simple web page have own scroll bar

Question

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

Answer 1

Use CSS:

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

Answer 2

HTML example markup:

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

It will be automatically scrolled if needed