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>