<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FixtableHeader.aspx.cs"
Inherits="Text.FixtableHeader" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function FixTableHeader() {
var t = document.getElementById("table");
var thead = t.getElementsByTagName("thead")[0];
var t1 = t.cloneNode(false);
t1.appendChild(thead);
document.getElementById("tableHeader").appendChild(t1)
}
window.onload = FixTableHeader;
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tableHeader">
</div>
<div style="overflow: scroll; height: 100px; 500px">
<table id="table" width="500" style="table-layout: fixed">
<thead>
<tr id="thead" style="background-color: #BEBEBE">
<th>
Account Number
</th>
<th>
Account Name
</th>
<th>
City
</th>
<th>
Country
</th>
</tr>
</thead>
<tbody>
<asp:Repeater ID="Reapeter1" runat="server">
<ItemTemplate>
<tr>
<td>
<%#DataBinder.Eval(Container.DataItem, "AccountNumber")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem, "AccountName")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem,"City")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem,"Country")%>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
</form>
</body>
</html>
如果你想表头和表身的每一列都对齐的话，table的style="table-layout: fixed"不能少。
C#后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace Text
{
public partial class FixtableHeader : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("AccountNumber"));
dt.Columns.Add(new DataColumn("AccountName"));
dt.Columns.Add(new DataColumn("City"));
dt.Columns.Add(new DataColumn("Country"));
DataRow dr = dt.NewRow();
dr["AccountName"] = "Test1";
dr["AccountNumber"] = "001";
dr["Country"] = "China";
dr["City"] = "Beijing";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["AccountName"] = "Test2";
dr["AccountNumber"] = "002";
dr["Country"] = "China";
dr["City"] = "Shanghai";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["AccountName"] = "Test3";
dr["AccountNumber"] = "003";
dr["Country"] = "the Nederlands";
dr["City"] = "Amsterdam";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["AccountName"] = "Test4";
dr["AccountNumber"] = "004";
dr["Country"] = "France";
dr["City"] = "Paris";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["AccountName"] = "Test5";
dr["AccountNumber"] = "005";
dr["Country"] = "Spain";
dr["City"] = "Barcelona";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["AccountName"] = "Test6";
dr["AccountNumber"] = "006";
dr["Country"] = "China";
dr["City"] = "Shanghai";
dt.Rows.Add(dr);
Reapeter1.DataSource = dt;
Reapeter1.DataBind();
}
}
}
}
GridView表头的固定
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewFixHeader.aspx.cs" Inherits="Text.GridViewFixHeader" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="ScrollableGridPlugin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ $('#<%=gvwList.ClientID %>').Scrollable({ ScrollHeight: 100 }); });
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="gvwList" AutoGenerateColumns="false">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="a" HeaderText="a"></asp:BoundField>
<asp:BoundField DataField="b" HeaderText="b"></asp:BoundField>
<asp:BoundField DataField="c" HeaderText="c"></asp:BoundField>
<asp:BoundField DataField="d" HeaderText="d"></asp:BoundField>
<asp:BoundField DataField="e" HeaderText="e"></asp:BoundField>
<asp:BoundField DataField="f" HeaderText="f"></asp:BoundField>
<asp:BoundField DataField="j" HeaderText="j"></asp:BoundField>
<asp:BoundField DataField="h" HeaderText="h"></asp:BoundField>
<asp:BoundField DataField="g" HeaderText="g"></asp:BoundField>
<asp:BoundField DataField="i" HeaderText="i"></asp:BoundField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace Text
{
public partial class GridViewFixHeader : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable tab = new DataTable();
tab.Columns.Add("a", Type.GetType("System.String"));
tab.Columns.Add("b", Type.GetType("System.String"));
tab.Columns.Add("c", Type.GetType("System.String"));
tab.Columns.Add("d", Type.GetType("System.String"));
tab.Columns.Add("e", Type.GetType("System.String"));
tab.Columns.Add("f", Type.GetType("System.String"));
tab.Columns.Add("g", Type.GetType("System.String"));
tab.Columns.Add("h", Type.GetType("System.String"));
tab.Columns.Add("i", Type.GetType("System.String"));
tab.Columns.Add("j", Type.GetType("System.String"));
for (int i = 0; i < 35; i++)
{
DataRow dr = tab.NewRow();
dr["a"] = string.Format("row:{0} columns:a", i.ToString().PadLeft(2, '0'));
dr["b"] = string.Format("row:{0} columns:b", i.ToString().PadLeft(2, '0'));
dr["c"] = string.Format("row:{0} columns:c", i.ToString().PadLeft(2, '0'));
dr["d"] = string.Format("row:{0} columns:d", i.ToString().PadLeft(2, '0'));
dr["e"] = string.Format("row:{0} columns:e", i.ToString().PadLeft(2, '0'));
dr["f"] = string.Format("row:{0} columns:f", i.ToString().PadLeft(2, '0'));
dr["g"] = string.Format("row:{0} columns:g", i.ToString().PadLeft(2, '0'));
dr["h"] = string.Format("row:{0} columns:h", i.ToString().PadLeft(2, '0'));
dr["i"] = string.Format("row:{0} columns:i", i.ToString().PadLeft(2, '0'));
dr["j"] = string.Format("row:{0} columns:j", i.ToString().PadLeft(2, '0'));
tab.Rows.Add(dr);
}
// Data bind method.
gvwList.DataSource = tab;
gvwList.DataBind();
}
}
}