如何修复手机上的催人泪粘虫表？

Question

我根据jquery floatthead插件创建了我的表。桌子有一个粘头。并且在移动设备下方出现表格滚动，第一列变为粘性。但在真实的设备上，它的工作原理很糟糕。桌头抽搐。第一列也是。如何修复这些错误？

我的桌子： https://codepen.io/malinosky/pen/vrBgMP

jQuery(function($) {
  var table = $(".b-table");
  table.floatThead({ position: "absolute", top: 0 });

  var tableWraps = $(".table-responsive");

  tableWraps.each(function() {
    var tableWrap = $(this);
    var headFirstColumn = tableWrap.find("td:first-child");

    tableWrap.on("scroll", function() {
      headFirstColumn.css("left", this.scrollLeft);
    });
  });
});

Answer 1

请勿使用absolute位置。而是这样做： table.floatThead({ position: "fixed", top: 0 });

内部滚动表的绝对位置更好。固定位置更适合页面滚动。如果您不提供任何价值，则插件会为您设置这些内容。

使用固定位置设置时，在滚动页面时表格的位置是“固定”的，从而消除了混乱。