CODEWITHSUNDEEP
htmlcss
Simd
Simd

Reputation: 21274

Make one section of simple web page have own scroll bar

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?

Upvotes: 13

Views: 58160

Answers (5)

estrar
estrar

Reputation: 1373

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/

Upvotes: 2

Allie
Allie

Reputation: 1179

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

Upvotes: 1

Nathan
Nathan

Reputation: 11149

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

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

Upvotes: 1

Hieu Le
Hieu Le

Reputation: 8415

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

Upvotes: 29

Morpheus
Morpheus

Reputation: 9065

Use CSS:

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

Upvotes: 3

Related Questions