HTML table with 100% overflow scroll for table only

Question

I am trying to have table having width of size of screen and overflow should be scroll bar rather then whole page gets scroll bar.

Currently following code generates the scroll bar for the whole page rather then scroll bar only for table.

any help is appreciated.

I have table which generates dynamic length

<table width="100%" style="overflow:none">
<tr>

for 1 ... n
<td></td>

</tr>
</table>


end for

Answer 1

Give this page you are working with an ID, and give this ID the overflow:hidden. That way other pages can still have overflow in their body. See DEMO

    body{
        width:100%, 
        overflow: hidden;
    }

    div.scrollWrapper{
        height:250px;
        overflow:scroll;
    }
    div.scrollWrapper table{
        width:100%;
    }