How To Make A Scrolling Table With Dynamic Data

I am trying to make a scrollable table with fixed headers that gets dynamically populated. I have found a good example on this site but could not implement it. I have created a f

Solution 1:

#ImageDataTable {
    border: 1px solid black;
    border-spacing: 0;
    padding: 0;
}

... 

<Table id="ImageDataTable" style="overflow:scroll;">

You've told your table that when it overflows, it should scroll. So the table happily takes up as much room as it needs, and then looks to see if it is overflowing - Nope! So it doesn't scroll.

If you want your table to scroll, you need to define exactly how big the table should be, say, with a div around it, or by specifying the max-height or max-width on the table. Then the table will render itself in that area and see that it (most likely) is cut off, and stick in the scrollbars.

Hope this helps.