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

好吧……本来希望看到一个有用的小提琴，但是似乎能专门处理绝对宽度的唯一函数，将会产生上述效果，是在您的resizeFixed函数中，您可以在其中设置宽度每个TH的像素数：

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

也许，如果您更改为最小宽度，那么影响可能较小。

固定表格中的第一行并意外调整大小

1 个答案: