Tuesday, March 10, 2009

Making a table scrollable

The whole point is to make an html table(asp.net table or whatever is rendered as an html one) sitting inside a div element that has overflow attribute set to "auto" or "scroll".

For example:
<div style="border-style: solid; overflow: scroll; height: 100px; width: 100px;">

<asp:table id="table" runat="server" borderwidth="1px" width="100%">

</asp:table></div>

asp:Panel is render as div, we can also use it:


<table border="1" width="100%">

<tbody><tr><td>stuff</td>

<td>more stuff</td></tr>

<tr><td>stuff</td>

<td>more stuff</td></tr>

<tr><td>stuff</td>

<td>more stuff</td></tr>

<tr><td>stuff</td>

<td>more stuff</td></tr>

<tr><td>stuff</td>

<td>more stuff</td></tr>

</tbody></table>


Just aware that we need to set the "CssClass" attribute for asp:Panel (not "Style", not "overflow"). Same technique should be able to make other control scrollable (e.g. GridView).

No comments: