滾動時粘滯表頭不保持寬度

Question

我正試圖在滾動時將表頭粘到頂部。

我使用的是這裏提供的解決方案：css-tricks.com/persistent-headers/。

但是，當我嘗試使用它時，表頭不保持其寬度。

function UpdateTableHeaders() { 
 
     $(".persist-area").each(function() { 
 
      var el    = $(this), 
 
       offset   = el.offset(), 
 
       scrollTop  = $(window).scrollTop(), 
 
       floatingHeader = $(".floatingHeader", this) 
 
      if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) { 
 
       floatingHeader.css({ 
 
       "visibility": "visible" 
 
       }); 
 
      } else { 
 
       floatingHeader.css({ 
 
       "visibility": "hidden" 
 
       });  
 
       }; 
 
      }); 
 
     } 
 
      
 
     $(function() { 
 
      var clonedHeaderRow; 
 
      $(".persist-area").each(function() { 
 
       clonedHeaderRow = $(".persist-header", this); 
 
       clonedHeaderRow 
 
       .before(clonedHeaderRow.clone()) 
 
       .css("width", clonedHeaderRow.width()) 
 
       .addClass("floatingHeader"); 
 
      }); 
 
      $(window) 
 
      .scroll(UpdateTableHeaders) 
 
      .trigger("scroll"); 
 
     });

.floatingHeader { 
 
     position: fixed; 
 
     top: 0; 
 
     visibility: hidden; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<table class="persist-area"> 
 
      <tr class="persist-header"> 
 
      <th>Company</th> 
 
      <th>Contact</th> 
 
      <th>Country</th> 
 
      </tr> 
 
      <tr> 
 
      <td>Alfreds Futterkiste</td> 
 
      <td>Maria Anders</td> 
 
      <td>Germany</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Centro comercial Moctezuma</td> 
 
      <td>Francisco Chang</td> 
 
      <td>Mexico</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Ernst Handel</td> 
 
      <td>Roland Mendel</td> 
 
      <td>Austria</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Island Trading</td> 
 
      <td>Helen Bennett</td> 
 
      <td>UK</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Laughing Bacchus Winecellars</td> 
 
      <td>Yoshi Tannamuri</td> 
 
      <td>Canada</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Magazzini Alimentari Riuniti</td> 
 
      <td>Giovanni Rovelli</td> 
 
      <td>Italy</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Magazzini Alimentari Riuniti</td> 
 
      <td>Giovanni Rovelli</td> 
 
      <td>Italy</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Magazzini Alimentari Riuniti</td> 
 
      <td>Giovanni Rovelli</td> 
 
      <td>Italy</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Magazzini Alimentari Riuniti</td> 
 
      <td>Giovanni Rovelli</td> 
 
      <td>Italy</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Magazzini Alimentari Riuniti</td> 
 
      <td>Giovanni Rovelli</td> 
 
      <td>Italy</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Magazzini Alimentari Riuniti</td> 
 
      <td>Giovanni Rovelli</td> 
 
      <td>Italy</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Alfreds Futterkiste</td> 
 
      <td>Maria Anders</td> 
 
      <td>Germany</td> 
 
      </tr> 
 
      <tr> 
 
      <td>Centro comercial Moctezuma</td> 
 
      <td>Francisco Chang</td> 
 
      <td>Mexico</td> 
 
      </tr> 
 
     </table>

如何讓我的表列排列，並期待自然？

任何幫助將不勝感激！

Answer 1

那麼，當你把position: fixed;你的克隆標題行不再在表中的情況下，因爲它是fixed。這意味着標題單元格寬度將不承擔數據單元寬度的寬度，因爲固定標題不再是表格的一部分。

即使您將克隆標題的寬度設置爲與「不固定」標題行的寬度相匹配，但如果未設置寬度，單元格將只佔用其單元格內容的寬度。因此，您可以在圖像中看到「摺疊」的外觀。

要解決此問題，您需要明確設置.floatingHeader的單元格寬度以匹配表格單元格的單元格寬度。您還需要將您的.floatingHeader的display設置爲table，以便它像表格一樣工作，因爲請記住它不再位於表格的上下文中。

所以你更新CSS可能是這樣的：

.floatingHeader { 
    position: fixed; 
    top: 0; 
    visibility: hidden; 
    display: table; /*Added*/ 
} 

.floatingHeader th, 
.persist-area th, 
.persist-area td { 
    padding: 2px 10px; 
    width: 33%; /*All cells must match widths*/ 
} 

的演示中看到this fiddle。

UPDATE

要同步與瀏覽器窗口的表頭大小調整，你可以將一個事件同步的固定頭和原始標題的寬度：

$(window).resize(function(){ 
     var w = $(".persist-header").width(); 
     $(".floatingHeader").width(w); 
    }); 

見本fiddle進行演示（調整框架窗口大小）

Answer 2

嘗試增加：

left: 0 
right: 0 
width: 100% 

您.floatingHeader類