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.

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

possible duplicate of [Making a div vertically scrollable using CSS](http://stackoverflow.com/questions/9707397/making-a-div-vertically-scrollable-using-css) — Liam, Feb 10 '15 at 13:35

score 29 · Accepted Answer · answered Jan 17 '13 at 13:48

29

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

answered Jan 17 '13 at 13:48

Hieu Le

8,288
1
34
55

score 3 · Answer 2 · answered Jan 17 '13 at 13:47

3

Use CSS:

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

answered Jan 17 '13 at 13:47

Morpheus

8,829
13
51
77

estrar · Answer 3 · 2013-01-17T14:15:29.073

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/

edited Jan 17 '13 at 14:15

answered Jan 17 '13 at 13:53

estrar

1,373
4
12
37

score 1 · Answer 4 · answered Jan 17 '13 at 13:48

1

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

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

answered Jan 17 '13 at 13:48

Nathan MacInnes

11,033
4
35
50

score 1 · Answer 5 · answered Jan 17 '13 at 13:49

1

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

answered Jan 17 '13 at 13:49

Allie

1,081
1
13
17

1

I can't recommend using the `style` attribute – John Dvorak Jan 17 '13 at 13:50
1

I believe we should avoid using inline CSS in our HTML code as much as posible. – Hieu Le Jan 17 '13 at 13:51
I think using inline `style` attributes are fine in certain cases. If this is a unique style, it makes the HTML easier to read by keeping it attached to the `
` tag. The alternative is to create an arbitrary class name and define it in a `
– Brent Washburne Jan 31 '14 at 18:15

Make one section of simple web page have own scroll bar

5 Answers5

Linked