DataGrid 表頭固定、內容捲動：純 JavaScript 實作

效果原理

1. 建立兩個容器：頂層 <table id="tbHeader"> 放置複製的表頭，下層 <div id="dvBody" style="overflow-y:scroll; height:300px"> 包裹原始 DataGrid。
2. 頁面載入時，複製 DataGrid 第一列 (rows[0]) 到 tbHeader，並同步儲存格寬度。
3. 隱藏 DataGrid 原本表頭 (th.style.display='none')，僅顯示固定表頭。
4. 捲動容器高度固定，超出內容自動出現垂直捲軸。

完整 JavaScript

function ScrollDataGrid() {
    var tb = document.getElementById("tbHeader");
    var dg = document.getElementById("dgSearchResult");
    if (dg != null) {
        var dv = document.getElementById("dvBody");
        var th = dg.rows[0];
        for (var i = 0; i < th.cells.length; i++)
            th.cells[i].width = th.cells[i].clientWidth; // 鎖定寬度
        
        var tr = th.cloneNode(true);
        tb.createTHead();
        tb.tHead.appendChild(tr);
        
        // 補齊捲軸寬度佔位欄
        var td = tr.insertCell();
        td.style.width = td.width = "19px";
        td.innerHTML = tr.cells[0].innerHTML;
        
        th.style.display = 'none';
        if (dg.scrollHeight < 300) dv.style.height = dg.scrollHeight + 2 + "px";
    }
}

ASPX 結構

<table id="tbHeader" width="100%" cellpadding="4" cellspacing="0"></table>
<div id="dvBody" style="overflow-y:scroll; height:300px">
    <asp:DataGrid id="dgSearchResult" ... />
</div>
<script> window.onload = ScrollDataGrid; </script>

優缺點

• ✅ 純前端、無 PostBack、相容自動產生欄位。
• ⚠️ 寬度鎖定為像素，視窗縮放可能錯位；複雜巢狀表頭不支援。