suchen

Heim >Web-Frontend >HTML-Tutorial >css控制固定表头，兼容行列合并_html/css_WEB-ITnose

css控制固定表头，兼容行列合并_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:51:401258Durchsuche

项目中设计的报表table设计的列数相对过多，当拖动下方的滚动条时无法对应表头所对应的列，因此在网上搜索了好一段日子，最后在网上找到了一些参考资料，然后总结归纳出兼容行列合并的固定表头demo。 

多浏览器没有做太多测试，在ie6中已测试通过。 

功能期待了很久今天终于找到解决的方式，总结到javaeye中方便日后查阅。实现方式可能还有更好的，希望有大牛路过，给我留点更好的实现例子作日后交流之用。 

以下是相关的css 

Html代码  

  2.    
  3.   



以下是HTML 

Html代码  

  1. 利用CSS代码让Table产生固定表头

      
  2.   
  3.   
  4.     
    5.   
    6.   
  6.   
    7.   
  7.   
    8.   
  8.   
    9.   
  9.   
    10.   
    11.   
    12.   
  12.   
    13.   
  13.   
    14.   
  14.   
    15.   
  15.   
    16.   
  16.   
    17.   
    18.   
    19.   
    20.   
  20.   
    21.   
  21.   
    22.   
  22.   
    23.   
  23.   
    24.   
  24.   
    25.   
  25.   
    26.   
    27.   
    28.   
  28.   
    29.   
  29.   
    30.   
  30.   
    31.   
  31.   
    32.   
  32.   
    33.   
  33.   
    34.   
    35.   
    36.   
  36.   
    37.   
  37.   
    38.   
  38.   
    39.   
  39.   
    40.   
  40.   
    41.   
  41.   
    42.   
    43.   
    44.   
  44.   
    45.   
  45.   
    46.   
  46.   
    47.   
  47.   
    48.   
  48.   
    49.   
  49.   
    50.   
    51.   
    52.   
  52.   
    53.   
  53.   
    54.   
  54.   
    55.   
  55.   
    56.   
  56.   
    57.   
  57.   
    58.   
    59.   
    60.   
  60.   
    61.   
  61.   
    62.   
  62.   
    63.   
  63.   
    64.   
  64.   
    65.   
  65.   
    66.   
    67.   
    68.   
  68.   
    69.   
  69.   
    70.   
  70.   
    71.   
  71.   
    72.   
  72.   
    73.   
  73.   
    74.   
    75.   
    76.   列头 列头 列头
    h1 h2 h3 h4 h5
      
  76.       
  77.     a
    		78.  单元格2 单元格3 单元格4 单元格5 单元格5
      
  78.       
  79.     b
    		80.  单元格2 单元格3 单元格4 单元格5 单元格5
      
  80.       
  81.     c
    		82.  单元格2 单元格3 单元格4 单元格5 单元格5
      
  82.       
  83.     d
    		84.  单元格2 单元格3 单元格4 单元格5 单元格5
      
  84.       
  85.     e
    		86.  单元格2 单元格3 单元格4 单元格5 单元格5
      
  86.       
  87.     f
    		88.  单元格2 单元格3 单元格4 单元格5 单元格5
      
  88.       
  89.     g
    		90.  单元格2 单元格3 单元格4 单元格5 单元格5
      
  



另外补充一点，如果在表头合并的是最后一行的时候，排版将出现问题。由于上面合并的只有两行，因此样式没有受到改变，如果要处理，暂时的解决办法就是不合并rowspan最后一行，将其多行显示，有点牵强，但找不到解决办法。类似情况如下图： 

 

找了些资料可作参考： 
http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx 
文章中亦说没有办法解决上述的这个问题，留待日后有更好的解决方案。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：实现单文件上传,页面局部刷新_html/css_WEB-ITnoseNächster Artikel：CSS属性之字体(Font)_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen