Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > css控制固定表头，兼容行列合并_html/css_WEB-ITnose

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

WBOY
Freigeben： 2016-06-24 11:51:40
Original
1276 Leute haben es durchsucht

项目中设计的报表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 
文章中亦说没有办法解决上述的这个问题，留待日后有更好的解决方案。

Verwandte Etiketten：
css控制固定表头，兼容行列合并
Quelle：php.cn
Vorheriger Artikel：实现单文件上传,页面局部刷新_html/css_WEB-ITnose Nächster Artikel：CSS属性之字体(Font)_html/css_WEB-ITnose
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2240
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2381
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1990
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1877
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1947
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage