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 

 3  4 5 6 91011

 

 

 

 7 名称
 8 
 
 
 
12 
13 

14 

15 16172021

 

 

18 李白
19 
 
 
22 
23 

View Code

2、使用Repeater控件绑定值

 1 

 2      3 4 7101314

         

             

 5                 序号
 6             
             

 8                 品名
 9             
             

11                 期初数量
12             
         
     
15 
16 

17     

18         19
20                 
21                     222528313233
34                     353841444546
47                     4851525354

             

                         

23                             <%# Eval("DGNo")%>
24                         
                         

26                             <%# Eval("DGName")%>
27                         
                         

29                             <%# Eval("BeginningNum", "{0:f2}")%>
30                         
                     
                 
                 

                         

36                             <%# Eval("DGNo")%>
37                         
                         

39                             <%# Eval("DGName")%>
40                         
                         

42                             <%# Eval("BeginningNum", "{0:f2}")%>
43                         
                     
                 
                 

                         

49                             
50                         
                     
                 
             
         
55     
56 

View Code

 

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