滚动时粘滞表头不保持宽度

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类