communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > css控制固定表头，兼容行列合并_html/css_WEB-ITnose

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

WBOY
Libérer： 2016-06-24 11:51:40
original
1276 Les gens l'ont consulté

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

Étiquettes associées：
css控制固定表头，兼容行列合并
source：php.cn
Article précédent：实现单文件上传,页面局部刷新_html/css_WEB-ITnose Article suivant：CSS属性之字体(Font)_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2240
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2381
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1990
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1877
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1947
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal