如何將表頭固定在HTML表格的頂部？

我有一個網頁，用來比較多種東西的特徵，我們稱之爲小工具。每個小部件都被表示爲自己的列，並且每個行都是小部件的可能功能。每個單元格表示每個窗口小部件是否支持該功能。如何將表頭固定在HTML表格的頂部？

現在，有很多功能，使網頁非常高。也可能有很多小部件，因此使得表格也非常寬。因此，滾動非常重要。

問題是，當用戶向下滾動時，我希望始終將標題行固定在頂部，並且只滾動表格的其餘部分。表格上方還有一些文字，我希望文字在用戶向下滾動時滾動頁面，但標題應該停在頂部。

這裏是至少的這個表是如何制定了一個樣本：

<div> 

     <table id="compareTable"> 
      <tr class="compareTableHead" id="compareHead"> 
       <td>Widget One</td> 
       <td>Widget Two</td> 
       <td>Widget Three</td> 
       <td>Widget Four</td> 
       <td>Widget Five</td> 
      </tr> 
      <tbody id="compareTableBody"> 
       <tr> 
        <td class="ch">Feature One</td> 
        <td class="uch">Feature One</td> 
        <td class="uch">Feature One</td> 
        <td class="ch">Feature One</td> 
        <td class="uch">Feature One</td> 
       </tr> 
       <tr> 
        <td class="uch">Feature Two</td> 
        <td class="uch">Feature Two</td> 
        <td class="ch">Feature Two</td> 
        <td class="uch">Feature Two</td> 
        <td class="ch">Feature Two</td> 
       </tr> 
      </tbody> 
     </table> 
    </div>

如何使在任何時候都寄託頂端標題行？

注意：有，當然不止上述實際頁面上，這裏是截圖：

另外，如果你想看到實際的全頁面本身，click here。

來源

2017-01-28 Jerry Dodge

創建一個類來鎖住表頭：

.locked { 
    position: fixed; 
    top: 0; 
    right: 0; 
    width: 100%; 
}

使用jQuery在表頭到達窗口頂部時添加此類，並在不在頂部時將其刪除。

var lockOffset = $('.compareTableHead').offset().top; 

$(window).scroll(function(){ 
    var locked = $('.compareTableHead'), 
     scroll = $(window).scrollTop(); 

    if (scroll >= lockOffset) locked.addClass('locked'); 
    else locked.removeClass('locked'); 
});

添加了一些額外的CSS規則.locked，以確保其正確顯示：

.locked { 
... 
    display: table; // this ensures the table head spans full width of window 
    padding: 0 8px; // to keep alignment with unfixed table head 
    box-sizing: border-box; 
}

CODEPEN

代碼片段

var lockOffset = $('.compareTableHead').offset().top; 
 

 
$(window).scroll(function() { 
 
    var locked = $('.compareTableHead'), 
 
    scroll = $(window).scrollTop(); 
 

 
    if (scroll >= lockOffset) locked.addClass('locked'); 
 
    else locked.removeClass('locked'); 
 
});

table { 
 
    width: 100%; 
 
    font-family: sans-serif; 
 
} 
 
table tr td { 
 
    padding: 20px; 
 
} 
 
.compareTableHead td { 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    background-color: lightblue; 
 
    color: white; 
 
} 
 
.locked { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    width: 100%; 
 
    display: table; 
 
    padding: 0 8px; 
 
    box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="randomText"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem minima ad delectus nostrum dolor, maiores voluptates, repellat cupiditate officiis, libero modi. Corporis voluptatem incidunt consequuntur cupiditate a error reprehenderit. Accusantium! 
 
    <br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique quis quod quos eaque nobis rerum sequi voluptate tempore harum fuga? Est laudantium nobis nam ad at! Repellendus officia minus ipsam.</div> 
 
<div> 
 

 
    <table id="compareTable"> 
 
    <tr class="compareTableHead" id="compareHead"> 
 
     <td>Widget One</td> 
 
     <td>Widget Two</td> 
 
     <td>Widget Three</td> 
 
     <td>Widget Four</td> 
 
     <td>Widget Five</td> 
 
    </tr> 
 
    <tbody id="compareTableBody"> 
 
     <tr> 
 
     <td class="ch">Feature One</td> 
 
     <td class="uch">Feature One</td> 
 
     <td class="uch">Feature One</td> 
 
     <td class="ch">Feature One</td> 
 
     <td class="uch">Feature One</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
     <tr> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     <td class="uch">Feature Two</td> 
 
     <td class="ch">Feature Two</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2017-01-28 18:30:51 sol

這看起來像* the *解決方案，我會再回來看看。 –

嘗試使用this JS插件來獲得該效果。你可以看到大量的演示如何使用它。

來源

2017-01-28 18:13:13 fernando

他們稱之爲「互聯網爆炸」哈哈 –

添加樣式屬性位置：固定到元素。

來源

2017-01-28 18:15:33 easy

像這樣的事情

$(window).scroll(function(){ 
 

 
var a = 112; 
 
var pos = $(window).scrollTop(); 
 
if(pos > a) { 
 
    $("#compareHead").css({ 
 
       position: 'fixed', 
 
       top: '51px' 
 
      }); 
 
} 
 
});

來源

2017-01-28 18:23:37 Born2Code

只有通過這一起，如果你喜歡我可以做出更清潔的東西。 – Born2Code

試試這個

#compareHead{ 
    position: fixed; 
}

來源

2017-01-28 18:24:30

爲什麼OP應該這樣做？ – rene

對不起。我不明白 –

如果他們解釋他們的解決方案，也許鏈接到文檔，答案會更好。 *嘗試這個*不教或未來的訪客學習任何東西。 – rene

如何將表頭固定在HTML表格的頂部？

回答

相關問題