First Attempt
So, the first option I saw online was to add "overflow-y: auto; display: block; height: 330px;" to the tbody tag. I saw somewhere where this could work with a single column, but with multiple columns, the header is pushed to the right, and the table rows are pushed to the left. I played with this awhile, but never could get it to work.
Solution
While not as elegant as I would like, this solution does work. Of course, if you isolate the header and then wrap the data rows in a div with the overflow-y stuff, that would work. However, a datagrid populates the header automatically. You could build another datagrid and mess with that, but jQuery quickly solves the issue. Here’s the plan:
•Add a place for the header to be moved outside of the table with the rows where the overflow-y will be used
•Move the header
•Realign the columns
New Markup
This is pretty basic. I added a table just before the table with data in it. This will hold the header. I also styled the div to allow for scrolling.
<table id="MyHeader"></table>
<div style="overflow-y: auto; height: 330px;">
<table id="MyDataRows">
<thead>
<tr class="grid_header">
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
jQuery Code
<script type="text/javascript">// <![CDATA[</script>
Final Markup
So, the end result is two tables whose column widths match but which function as a scrollable datagrid table with a fixed header.
<table id="MyHeader">
<thead>
<tr class="grid_header">
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
</table>
<div style="overflow-y: auto; height: 330px;">
<table id="MyDataRows">
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>