滚动时粘性表格标题不保持宽度

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 以获取演示。

更新

要将标题大小与浏览器窗口调整大小上的表格同步，您可以附加一个同步固定标题和原始标题宽度的事件：

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

查看此fiddle 以获取演示（调整框架窗口大小）

Answer 2

尝试添加：

left: 0
right: 0
width: 100%

到你的.floatingHeader 班级