ASP.NET ListView - Scrollable with fixed headers using CSS

Question

I am using an ASP.NET ListView control and, at the moment, I have a scrollable grid:

(example below is simplified and contains embedded styling for sake of question)

<asp:ListView ID="ListView" runat="server" DataKeyNames="Id">
        <LayoutTemplate>
            <div style="height:225px; overflow:auto;">
                <table runat="server">
                    <tr>
                        <th>
                            <span>Column1</span>
                        </th>
                        <th>
                            <span>Column2</span>
                        </th>
                        <th>
                            <span>Column3</span>
                        </th>
                    </tr>
                    <tr id="itemPlaceholder" runat="server" />
                </table>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <tr id="items" runat="server">
                <td class="first">
                    <%#Eval("Column1")%>
                </td>
                <td>
                    <%#Eval("Column2")%>
                </td>
                <td>
                    <%#Eval("Column3")%>
                </td>
            </tr>
        </ItemTemplate>
    </asp:ListView>

I'd like to apply CSS such that my headers are fixed.

What styling can I add to make it work?

Answer 1

Try http://www.imaputz.com/cssStuff/bigFourVersion.html ?