How to create a scrolling table with dynamic data
I am trying to create a scrollable table with fixed headers that populate dynamically. I found a good example on this site but was unable to implement it. I created a fiddle here: http://jsfiddle.net/nokfw667/6/
The table is populated with a button click and the javascript it generated was included with sample data that is returned. In my example, I have hardcoded the table. At the top of the fiddle is an example I got from this site. Then I tried to create my own, but that didn't work either.
Example table:
<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>
Does anyone know what I am doing wrong?
source to share
#ImageDataTable {
border: 1px solid black;
border-spacing: 0;
padding: 0;
}
...
<Table id="ImageDataTable" style="overflow:scroll;">
You told your table that when it overflows, it should scroll. So the table happily takes up as much space as it needs and then looks to see if it is full - No! Therefore, it does not scroll.
If you want your table to scroll, you need to figure out exactly how big the table is, say with a div around it or by specifying the maximum or maximum width of the table. The table will then find itself in this area and see that it is (most likely) disabled and inserted into the scrollbars.
Hope it helps.
source to share