实现 DataGrid表头不动，表身滚动的方法_asp:datagrid 标题不会跟着滚动条滚动-优快云博客

本文介绍了一种使表格头部在滚动时保持可见的技术方案。通过JavaScript和CSS表达式实现了固定头部的效果，确保用户在浏览长表格时始终能看到列标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用纯脚本实现:

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);

//tr.applyElement(tb);

tb.createTHead();

var tbh = tb.tHead;

tbh.appendChild(tr);

tr = tbh.rows[0];

var td = tr.insertCell();

td.style.width = 19;

td.width = 19;

td.innerHTML = tr.cells[0].innerHTML;

th.style.display = 'none';

if(dg.scrollHeight < 300 )

dv.style.height = dg.scrollHeight * 1 + 2;

}

</table>

<asp:datagrid id="dgSearchResult" style="BORDER-COLLAPSE: collapse" runat="server" Width="100%" CellPadding="4" DataKeyField="编号" BorderWidth="1px" BorderStyle="Solid" BorderColor="RoyalBlue" GridLines="None">

<asp:ButtonColumn Text="选择" HeaderText="<font face=webdings>6</font>" CommandName="Delete">

</asp:ButtonColumn>

</Columns>

</asp:datagrid></div>

使用Style-Expression实现:

<style>

TD.lockedhead { POSITION: relative; ; TOP: expression(lockhead(this)) }

</style>

function lockhead(cell)

{

var table=cell.parentElement.parentElement;

while(table&&table.tagName.toLowerCase()!="table")

table=table.parentElement;

var _div=table.parentElement;

return _div.scrollTop+(cell.parentElement.rowIndex)*(parseInt(table.border)+parseInt(table.cellSpacing)-1);

}

</script>

function LockHead(table,cnt)

{

if(table&&table.rows.length>=cnt)

{

for(k=0;k<cnt;k++)

{

for(i=0;i<table.rows[k].cells.length;i++)

{

table.rows[k].cells[i].className="lockedhead";

}

LockHead(Form1.all.DataGrid1,1);

</script>

还有一种:

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

</HEAD>

<BODY>

<TH nowrap>Header A</TH>

<TH nowrap>Header B</TH>

<TH nowrap>Header C</TH>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</table>

</div>

</BODY>

</HTML>

这个是css:
.DataGridFixedHeader {
position: relative;
top: expression(this.offsetParent.scrollTop);
background-color: blue
}

这个是应用:
...
<HeaderStyle Font-Bold="True" CssClass="ms-formlabel DataGridFixedHeader" BackColor="#80AFEF">
</HeaderStyle>
...