> 웹 프론트엔드 > HTML 튜토리얼 > css控制固定表头,兼容行列合并_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:51:40
원래의
1258명이 탐색했습니다.

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

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

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

以下是相关的css 

Html代码  

  1.    
  2.   



以下是HTML 

Html代码  

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

      
  2.   
  3.   
  4.     
  5.   
  6.   
  7.   
  8.   
  9.   
  10.   
  11.   
  12.   
  13.   
  14.   
  15.   
  16.   
  17.   
  18.   
  19.   
  20.   
  21.   
  22.   
  23.   
  24.   
  25.   
  26.   
  27.   
  28.   
  29.   
  30.   
  31.   
  32.   
  33.   
  34.   
  35.   
  36.   
  37.   
  38.   
  39.   
  40.   
  41.   
  42.   
  43.   
  44.   
  45.   
  46.   
  47.   
  48.   
  49.   
  50.   
  51.   
  52.   
  53.   
  54.   
  55.   
  56.   
  57.   
  58.   
  59.   
  60.   
  61.   
  62.   
  63.   
  64.   
  65.   
  66.   
  67.   
  68.   
  69.   
  70.   
  71.   
  72.   
  73.   
  74.   
  75.   
  76.   
  77.   
  78.   
  79.   
  80.   
  81.   
  82.   
  83.   
  84.   
  85.   
  86.   
  87.   
  88.   
  89.   
  90.   
  91.   
  92.   
  93.   
  94.   
  95.   
  96.   
  97.   
  98.   
  99.   
  100.   
  101.   
  102.   
  103.   
  104.   
  105.   
  106.   
  107.   
  108.   
  109.   
  110.   
  111.   
  112.   
  113.   
  114.   
  115.   
  116.   
  117.   
  118.   
  119.   
  120.   
  121.   
  122.   
  123.   
  124.   
  125.   
  126.   
  127.   列头 列头 列头
    h1 h2 h3 h4 h5
      
  128.       
  129.     a
  130. 单元格2 单元格3 单元格4 单元格5 单元格5
      
  131.       
  132.     b
  133. 单元格2 单元格3 单元格4 单元格5 单元格5
      
  134.       
  135.     c
  136. 单元格2 单元格3 单元格4 单元格5 单元格5
      
  137.       
  138.     d
  139. 单元格2 单元格3 单元格4 单元格5 单元格5
      
  140.       
  141.     e
  142. 单元格2 单元格3 单元格4 单元格5 单元格5
      
  143.       
  144.     f
  145. 单元格2 单元格3 单元格4 单元格5 单元格5
      
  146.       
  147.     g
  148. 单元格2 单元格3 单元格4 单元格5 单元格5
      
  



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

 

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿