CODEWITHSUNDEEP
htmlcss
Alan2
Alan2

Reputation: 24572

How can I add a scrollbar to a DIV that contains a table?

I have the following HTML that I am using with browser as new as IE8 and above:

<div><table class="grid table">

and .css file:

.grid {
clear: both;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}

This works but when my table is larger than the containing DIV then it goes offscreen.

How can I make it so a scroll bar allows me to scroll my table to the right and left if it is too big for the screen?

Upvotes: 0

Views: 99

Answers (3)

HighHopes
HighHopes

Reputation: 2102

The easiest way is to add the overflow attribute to the surrounding div. The documentation is here for that.

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99484

Add an overflow: auto; CSS declaration to the div element.

JSBin Demo

CSS:

.box {
  height: 150px;
  border: 1px solid black; /* Just for demo */

  overflow: auto;
}

HTML:

<div class="box">
    <table>
        <tr>
            <td>Cell #1</td>
            <td>Cell #2</td>
            <td>Cell #3</td>
            <td>Cell #4</td>
            <td>Cell #5</td>
        </tr>
        <!-- so on... -->
    </table>
</div>

Update

If you need only horizontally scroll, use overflow-x: auto; instead.

JSBin Demo

Upvotes: 4

Kevin Lynch
Kevin Lynch

Reputation: 24703

Add overflow-y:auto;

DEMO http://jsfiddle.net/kevinPHPkevin/SHbnM/

div {
    overflow-y:auto;
    height:100px;
}

Upvotes: 1

Related Questions