水平滾動粘HTML表格標題

我有一個HTML表格，其中有很多標題不適合在屏幕上。由於行數的多少，我使用了一個粘性標題，它在垂直方向上非常完美。水平滾動粘HTML表格標題

不幸的是它在水平滾動中也保持其粘性。我應該如何更改我的代碼以允許水平滾動，但保持垂直滾動的固定標題？

表本身是直截了當：

<table id="calctable"> 
    <thead class="fixed"> 
     <tr id="table-head"> 
      <th><!--Loads of them--></th><th><!--Continues like forever--></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td><!--And even more of this kind...--></td></tr> 
     <tr><td><!--And even more of this kind...--></td></tr> 
    </tbody> 
</table> 

<table id="header-fixed"></table>

而且我的JavaScript（的作品，但是... ...只有在垂直滾動）：

$(function() { 

      var tableOffset = $("#calctable").offset().top; 
      var $header = $("#calctable > thead").clone(); 
      var $fixedHeader = $("#header-fixed").append($header); 

      $(window).bind("scroll", function() { 
       var offset = $(this).scrollTop(); 

       if (offset >= tableOffset && $fixedHeader.is(":hidden")) { 
        $fixedHeader.show(); 
       } 
       else if (offset < tableOffset) { 
        $fixedHeader.hide(); 
       } 
      }); 

     });

我的CSS：

#header-fixed { 
    position: fixed; 
    top: 0px; display:none; 
    background-color:white; 
}

謝謝！

來源

2014-02-28 Qohelet

前段時間我遇到過這個問題：http://mkoryak.github.io/floatThead/是解決這個問題的好插件。它唯一的問題是它在頭元素容器上強制「overflow：hidden;」。所以如果你想在標題中使用CSS下拉菜單等，你需要將它們設置爲'position：fixed'。但那是一個非常特殊的用例。 –

非常感謝Nico O，我能夠在幾秒鐘內解決這個問題。

我只是需要加入另一個JavaScript：

<script src="https://rawgithub.com/mkoryak/floatThead/master/dist/jquery.floatThead.min.js">

刪除上述完全（現在已廢棄）CSS-信息和一條單行取代的Javascript：

 $(function() {     
      $('#calctable').floatThead(); 
     });

作品！

來源

2014-02-28 14:16:16 Qohelet

如果我是你，我會在本地拉下腳本，我可能會在未來將它從該位置移開。 – mkoryak

它已經做到了，這個項目在沒有互聯網的計算機上運行:) – Qohelet

水平滾動粘HTML表格標題

回答

相關問題