Question: The columns in my html table are very large in number and I have to scroll all the way to view these elements.

I tried enclosing the html table within the below div;

```
div.scroll
{
overflow:scroll;
}

```

But the problem is, the scroll bars appear in the bottom of the table and I have to scroll all the way to the bottom of the table and again navigate back to the required row and view it.

I want the scroll bars[both horizontal and vertical] to be floating so that I can scroll across starting from the first row and first column.[Similar to this demo: <http://www.matts411.com/static/demos/grid/index.html> ] .

I dont want to use any third party libraries. Is this possible ?

Answer: 
Always set the height and width of the enclosing `div` to get the scrolling effect and set the `display` property to `block` so that the scroll bar would come below the div (not below the table) 

```
div.scroll{  
display:block;  
height:400px;  
overflow:auto;  
}

```
See this [Demo](http://jsfiddle.net/Dineshkani/CLv7F/) it can help. Place the table inside the div then the scroll bar does not appear at the bottom of the table.

Use the max-height and max-width for your div like this

```
.simple{
overflow: auto;
max-width: 200px;
max-height: 180px;
}

```