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

一、业务需求

web系统中有的用户不喜欢分页，希望数据能在一个页面中全部显示出来。

但是页面中是有滚动条的，当查看下面的数据时就不知道数据行中的列对应的是哪个标题的列。

也就是无法知道这个列是什么数据。

所以，希望table的标题固定，而数据行中数据过多时出现滚动条，这样比较人性化。

二、js方法(需要和三、页面中的div和table布局 配套使用。div和table的id已经被指定)

备注:使用此方法，需要jquery。

 1 /*
 2 *用途:处理表头固定，表格数据行出现滚动条，两个表格列的对齐问题
 3 //tbTitle为标题table
 4 //tbData为数据table
 5 //FisrtColWidth为自定义第一列的宽度(可以为空，不指定值)
 6 */
 7 function TableVerticalAlignment(FisrtColWidth) {
 8     //重新设置titleTable所在的div宽度
 9     $("#divTableTitle").width($("#divData").width());
10 
11     var tbTitle_width = $("#tbTitle tr:first th").length;
12     //标题行第一列的宽度，自定义。目前使用的是像素。
13     if (FisrtColWidth != "" && FisrtColWidth != null && FisrtColWidth != undefined) {
14         $("#tbTitle tr:first th").eq(0).width(FisrtColWidth);
15     }
16     for (i = 0; i < tbTitle_width; i++) {
17         $("#tbData tr:first td").eq(i).width($("#tbTitle tr:first th").eq(i).width())
18     }
19 }

View Code

三、页面中的div和table布局

1、使用ajax获取的表格(原生的html代码)

 1 //页面中div和表格的布局
 2 <div class="xliebai_i" id="divTableTitle">
 3 <table width="100%" cellspacing="0" cellpadding="0" class="xliebai_u" id="tbTitle">
 4 <thead>
 5 <tr>
 6 <th>
 7 名称
 8 </th>
 9 </tr>
10 </thead>
11 </table>
12 </div>
13 <div class="xliebai_i" style="height: 300px; overflow: auto;" id="divTableData">
14 <div id="divData">
15 <table width="100%" cellspacing="0" cellpadding="0" class="xliebai_u" id="tbData">
16 <tr>
17 <td>
18 李白
19 </td>
20 </tr>
21 </table>
22 </div>
23 </div>

View Code

2、使用Repeater控件绑定值

 1 <div id="divTableTitle">
 2     <table id="tbTitle" width="100%" class="table2">
 3         <tr>
 4             <th style="width: 5%">
 5                 序号
 6             </th>
 7             <th style="width: 10%">
 8                 品名
 9             </th>
10             <th style="width: 8%">
11                 期初数量
12             </th>
13         </tr>
14     </table>
15 </div>
16 <div id="divTableData" style="height: 300px; overflow: auto">
17     <div id="divData">
18         <table width="100%" id="tbData" class="table2 table table-striped table-bordered table-hover">
19             <asp:Repeater ID="rptDataList" runat="server">
20                 <ItemTemplate>
21                     <tr class="light">
22                         <td align="center">
23                             <%# Eval("DGNo")%>
24                         </td>
25                         <td align="center">
26                             <%# Eval("DGName")%>
27                         </td>
28                         <td align="center">
29                             <%# Eval("BeginningNum", "{0:f2}")%>
30                         </td>
31                     </tr>
32                 </ItemTemplate>
33                 <AlternatingItemTemplate>
34                     <tr class="gridrowalt light">
35                         <td align="center">
36                             <%# Eval("DGNo")%>
37                         </td>
38                         <td align="center">
39                             <%# Eval("DGName")%>
40                         </td>
41                         <td align="center">
42                             <%# Eval("BeginningNum", "{0:f2}")%>
43                         </td>
44                     </tr>
45                 </AlternatingItemTemplate>
46                 <FooterTemplate>
47                     <tr id="Tr1" runat="server" visible='<%#bool.Parse((rptDataList.Items.Count==0).ToString())%>'>
48                         <td colspan="3" align="center">
49                             <asp:Label ID="lblInfo" runat="server" Text="暂无数据"></asp:Label>
50                         </td>
51                     </tr>
52                 </FooterTemplate>
53             </asp:Repeater>
54         </table>
55     </div>
56 </div>

View Code

 

转载于:https://www.cnblogs.com/masonblog/p/8615178.html