需求
web系统中有的用户不喜欢分页，希望数据能在一个页面中全部显示出来。
但是页面中是有滚动条的，当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列。
也就是无法知道这个列是什么数据。
所以，希望table的标题固定，而数据行中数据过多时出现滚动条，这样比较人性化。
js方法
需要和三、页面中的div和table布局 配套使用。div和table的id已经被指定
备注:使用此方法，需要jquery。
/*
*用途:处理表头固定，表格数据行出现滚动条，两个表格列的对齐问题
//tbTitle为标题table
//tbData为数据table
//FisrtColWidth为自定义第一列的宽度(可以为空，不指定值)
*/
function TableVerticalAlignment(FisrtColWidth) {
//重新设置titleTable所在的div宽度
$("#divTableTitle").width($("#divData").width()); var tbTitle_width = $("#tbTitle tr:first th").length;
//标题行第一列的宽度，自定义。目前使用的是像素。
if (FisrtColWidth != "" && FisrtColWidth != null && FisrtColWidth != undefined) {
$("#tbTitle tr:first th").eq(0).width(FisrtColWidth);
}
for (i = 0; i < tbTitle_width; i++) {
$("#tbData tr:first td").eq(i).width($("#tbTitle tr:first th").eq(i).width())
}
}
页面中的div和table布局
使用ajax获取的表格(原生的html代码)
/*页面中div和表格的布局*/
<div class="xliebai_i" id="divTableTitle">
<table width="100%" cellspacing="0" cellpadding="0" class="xliebai_u"
id="tbTitle">
<thead>
<tr>
<th>
名称
</th>
</tr>
</thead>
</table>
</div>
<div class="xliebai_i" style="height: 300px; overflow: auto;" id="divTableData">
<div id="divData">
<table width="100%" cellspacing="0" cellpadding="0" class="xliebai_u"
id="tbData">
<tr>
<td>
李白
</td>
</tr>
</table>
</div>
</div>
使用Repeater控件绑定值
<div id="divTableTitle">
<table id="tbTitle" width="100%" class="table2">
<tr>
<th style="width: 5%">
序号
</th>
<th style="width: 10%">
品名
</th>
<th style="width: 8%">
期初数量
</th>
</tr>
</table>
</div>
<div id="divTableData" style="height: 300px; overflow: auto">
<div id="divData">
<table width="100%" id="tbData" class="table2 table table-striped table-bordered table-hover">
<asp:Repeater ID="rptDataList" runat="server">
<ItemTemplate>
<tr class="light">
<td align="center">
<%# Eval("DGNo")%>
</td>
<td align="center">
<%# Eval("DGName")%>
</td>
<td align="center">
<%# Eval("BeginningNum", "{0:f2}")%>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr class="gridrowalt light">
<td align="center">
<%# Eval("DGNo")%>
</td>
<td align="center">
<%# Eval("DGName")%>
</td>
<td align="center">
<%# Eval("BeginningNum", "{0:f2}")%>
</td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
<tr id="Tr1" runat="server" visible='<%#bool.Parse((rptDataList.Items.Count==0).ToString())%>'>
<td colspan="3" align="center">
<asp:Label ID="lblInfo" runat="server" Text="暂无数据"></asp:Label>
</td>
</tr>
</FooterTemplate>
</asp:Repeater>
</table>
</div>
</div>