實作表頭固定、內容可捲動的 GridView 解決方案

核心概念

僅需設定 GridView 寬度，透過 JavaScript 將表頭複製至獨立 <div>，內容區設定 overflow-y: scroll; height: 200px 實現垂直捲動。測試環境相容 IE6 與 Firefox。

完整程式碼

<asp:GridView ID="GridView1" runat="server" Width="560" ...> ... </asp:GridView>
<div id="a"></div>
<div style="overflow-y: scroll; height: 200px">
    <asp:GridView ID="GridView1" ...></asp:GridView>
</div>
<script>
function s() {
    var t = document.getElementById("<%=GridView1.ClientID%>");
    var t2 = t.cloneNode(true);
    for (i = t2.rows.length - 1; i > 0; i--) t2.deleteRow(i);
    t.deleteRow(0);
    a.appendChild(t2);
}
window.onload = s;
</script>