Question

I have the following static code in a HTML template:

<table>
    <thead></thead>
    <tbody></tbody>
</table>

I dynamically put and delete rows and columns in the table using jQuery and AJAX, depending on user interactions. Underneath the table, there is some other static content. If the table is very long, users have to scroll for a pretty long time until they get to the static content underneath the table. In order to avoid that, only some upper part of the table should be shown at a time and the table should have its own scrollbar so that users can either scroll down the table or scroll down the entire page so that they can reach the static content underneath the table more quickly.

What is the best way to do this using HTML5? Do I need frames or some special CSS or JavaScript? Thank you very much in advance!

Answer 1

You’ll need to put the table inside a div, and have that div be the part that scrolls.

Give that div a fixed height, and overflow: auto (or overflow-y: ...) in its CSS. This will ensure that the parts of the table that overflow the size of the div will be scrollable.

See http://jsfiddle.net/alnitak/Y7Yg3/