jQuery粘性

Question

我正在为放在页面中间和页面底部的表格制作粘性标头。在大多数情况下，我已经完成了这项工作，但是我无法弄清楚如何正确放置页眉。

我尝试了固定位置，但是在框外滚动时遇到了问题，标题头的宽度完全混乱，发粘似乎将标题插入表中，并且格式混乱。

有什么想法吗？

    function stickyTableHead(tableID) {
  var $tmain = $(tableID);
  var $parent = $(tableID).parent();
  var pos = $parent.offset().top + $tmain.find(">thead").height();
  var $tScroll = $tmain.children("thead")
    .clone()
    .wrapAll('<table id="tScroll" />')
    .parent()
    .addClass($(tableID).attr("class"))
    .css("position", "sticky")
    .css("top", 0)
    .css("display", "none")
    .prependTo($tmain);


  $($parent).scroll(function() {
    var dataScroll = $tScroll.data("scroll");
    dataScroll = dataScroll || false;
    if (jQuery(this).scrollTop() >= $tmain.find(">thead").height()) {
      if (!dataScroll) {
        $tScroll
          .data("scroll", true)
          .show()
          .find("th").each(function() {
            $(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
          });
      }
    } else {
      if (dataScroll) {
        $tScroll
          .data("scroll", false)
          .hide();
      }
    }
  });
}

$(document).ready(function() {
  stickyTableHead('#transactionT');
});

例如

JsFiddle，因为这里的文本编辑器太长了 https://jsfiddle.net/zazvorniki/7g245fr6/54/