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

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

阅读量：5017 次

发布时间：2019-06-12

本文共 2704 字，大约阅读时间需要 9 分钟。

一、业务需求

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 
 9 
10 
11 
                            7 名称 8          
        
       
12 
      
13 
      
       14 
       
        15 
        
         16 
           17 
20 
21 
                              18 李白19           
         
        
22 
       
23

18 李白19

View Code

2、使用Repeater控件绑定值

1 
      
        2     
       
         3         
           4             
 7             
10             
13         
14     
                            5                 序号 6                        8                 品名 9                       11                 期初数量12                      
        
       
15 
      
16 
      
       17     
       
        18         
        
         20                 
         
          21                     
         
        
        
         34                     
        
        
         47                     
        
        
         19             
           22                         
25                         
28                         
31                     
32                 33                 
           35                         
38                         
41                         
44                     
45                 46                 
           48                         
51                     
52                 53             54         
                              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

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