社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > css控制固定表头，兼容行列合并_html/css_WEB-ITnose

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

WBOY
發布： 2016-06-24 11:51:40
原創
1276 人瀏覽過

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

相關標籤：
css控制固定表头，兼容行列合并
來源：php.cn
上一篇：实现单文件上传,页面局部刷新_html/css_WEB-ITnose 下一篇：CSS属性之字体(Font)_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2240
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2381
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
1990
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1877
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1947
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板