How to make a scrolling table with dynamic data

Question

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 fiddle here: http://jsfiddle.net/nokfw667/6/

The table gets populate by clicking the button and the javascript that creates it has been included with an example of the data that gets returned. In my example I hardcoded the table. At the top of the fiddle is the example I got from this site. I then tried to create my own but that did not work either.

Table example:

<Table id="ImageDataTable">
    <thead>
        <tr>
            <th style="width:140px;">Whole Nbr</div>
            <th style="width:90px;">Type</th>
            <th style="width:190px;">Size</th>
            <th style="width:100px;">Revision</th>
            <th style="width:140px;">Other Nbr</th>
            <th style="width:90px;">Sheet Nbr</th>
            <th style="width:190px;">Of Sheets</th>
            <th style="width:100px;">Frame Nbr</th>
            <th style="width:140px;">Of Frames</th>
            <th style="width:90px;">Doc Title</th>
            <th style="width:190px;">Note</th>
            <th style="width:100px;">Prnt</th>
            <th style="width:140px;">Obs</th>
            <th style="width:90px;">Acquire Date</th>
            <th style="width:190px;">Source</th>
            <th style="width:100px;">Base Doc</th>
            <th style="width:140px;">Acc Doc Nbr</th>
            <th style="width:90px;">CommonSubDirectory</th>
        </tr> 
    </thead>
    <tbody id="TmageDataBody" style="overflow:scroll">
        <tr>
            <td class="WholeNumberCell"></td>
            <td class="WholeNumberCell">
                 ST
            </td>
            <td class="WholeNumberCell">
                 A
            </td>
            <td class="WholeNumberCell">
                 undefined
            </td>
            <td class="WholeNumberCell">
                 null
            </td>
            <td class="WholeNumberCell">
                 6
            </td>
            <td class="WholeNumberCell">
                10
            </td>
            <td class="WholeNumberCell">
                1
            </td>
            <td class="WholeNumberCell">
                1
            </td>
            <td class="WholeNumberCell">
                JOGGLING OF ALUMINUM ALLOY EXTRUDED
           </td>
           <td class="WholeNumberCell">
                91179
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
                No
           </td>
           <td class="WholeNumberCell">
                No
           </td>
           <td class="WholeNumberCell">
                0
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
           </td>
           <td class="WholeNumberCell">
               \CDVolumes
           </td>
       </tr>
   </tbody>
</Table></tbody>
</Table>

Anyone know what I am doing wrong?

Answer 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.