html中table表格标题固定表数据行出现滚动条

需求

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>