调整固定表头的大小

Question

我有一张带有width=100% 的表格，有很多行和固定的标题。 我从这边得到的fixed headers解决方案：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 $floatingHeader = $(".persist-header", this).clone();

  $floatingHeader.children().width(function(i, val) {
    return $(".persist-header").children().eq(i).width();
  });

  $floatingHeader.css("width", $(".persist-header", this).width()).addClass("floatingHeader");
  $(".persist-header", this).before($floatingHeader);

  $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="100%" class="persist-area">
  <tr class="persist-header">
    <th> Entry 1</th>
    <th> Entry 2</th>
  </tr>
  <!-- stuff and stuff -->
</table>

现在，如果我打开我的页面，一切看起来都很好。 即使在滚动新的固定标题后也会出现。 但是，如果我调整页面大小（例如将窗口大小调整为宽度的一半），固定标题会保持其原始大小。

我认为问题出在return $(".persist-header").children().eq(i).width(); 部分。似乎它创建了具有固定像素宽度而不是百分比的标题。

如何实现具有自动调整宽度的固定标题？

Answer 1

用途：

$(window).on('resize', function(){
      //...
});

并在那里重新运行您的标题宽度代码