How to add scroll bar to my dynamic table?

I would wrap the table with a div

<body> 

 <div style="overflow:scroll;height:80px;width:100%;overflow:auto">

    <table width="800" border="0"  class="my-table">
    <tr>      </tr>  
    </table>  

 </div>

</body>

The quick and easy answer is CSS overflow:scroll; on the parent element.

However, if you're trying to jazz up your tables, I'd suggest going one step further, and use a JQuery plugin like Fixed Table Header.

The nice thing about this is that it means you can scroll the table body while keeping the header in place, which makes it much easier to read when you've got large amounts of data.

You might also want a script that allows your users to click in the header and sort the table by different columns. In that case, FlexiGrid might be an even better option.

Tags:

Javascript

Html

Css

Jquery

Recent Posts