javascript - 修复了表格顶行和意外调整大小的问题

Question

我在我的网站上实现了一个带有固定顶行的表格，当查看者滚动页面时，该表格将与标题导航一起移动。该表包含在 MaterializeCSS 选项卡 ( https://materializecss.com/tabs.html ) 中。

为了将 div 包含在特定选项卡中，表格被包装在 id 为“tab1”的 div 中。但是，当我包含此 id 时，表格的顶行由于某种原因会调整为小于表格的整个宽度。只要我不包含 id，就不会出现此错误。我尝试在 JSFiddle 中复制该错误，但由于我在网站上拥有所有编码，这有点复杂。我确信该错误是由于用于设置固定表行的 Javascript 代码造成的，并且希望有人能够找出导致此问题的原因。

<script>
  (function($) {
    $.fn.fixMe = function() {
      return this.each(function() {
        var $this = $(this),
          $t_fixed, $table_wrap, $table_header_wrap, $container,
          $header_height = $('nav').height();

        function init() {
          $container = $this.parent();
          $table_header_wrap = $('<div>').addClass('table_header_wrap').insertAfter($this);
          $table_wrap = $('<div>').addClass('table_wrap').insertAfter($table_header_wrap).append($this);
          $t_fixed = $this.clone().find("tbody").remove().end().hide().appendTo($table_header_wrap);
          $table_header_wrap.css({
            top: $header_height + "px"
          }).on('scroll', header_wrap_scroll);
          resizeFixed();
        }

        function resizeFixed() {
          $table_header_wrap.width($container.width() + 10);
          //$table_wrap.width($container.width());
          $t_fixed.width($this.width() + 2);
          $t_fixed.find("th").each(function(index) {
            $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
          });
        }

        function scrollFixed() {
          var offset = $(this).scrollTop(),
            tableOffsetTop = $this.offset().top,
            tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
          if (offset + $header_height < tableOffsetTop || offset + $header_height > tableOffsetBottom)
            $t_fixed.hide();
          else if (offset + $header_height >= tableOffsetTop && offset + $header_height <= tableOffsetBottom && $t_fixed.is(":hidden"))
            $t_fixed.show();
        }

        function header_wrap_scroll() {
          $table_wrap.scrollLeft($table_header_wrap.scrollLeft());
        }
        $(window).resize(resizeFixed);
        $(window).scroll(scrollFixed);
        init();
      });
    };
  })(jQuery);

  $(document).ready(function() {
    $("table").fixMe();
  });
  </script>

HTML 非常简单，但下面包含一个示例来显示 id 设置为 tab1 的表格的结构，如上所述:

<div id="tab1" class="table1">
  <table class="">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
    </tbody>
  </table>
</div>

Answer 1

嗯...最好能看到一个工作 fiddle ，但似乎唯一专门处理绝对宽度的函数，它会产生所描述的效果是在您的 resizeFixed 函数中，您在其中设置宽度每个 TH 的像素数:

$t_fixed.find("th").each(function(index) {
   $(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
});

也许如果您更改为 min-width，影响可能会更小。