Question

我正在处理HTML表格，我需要制作标题＆＃34;卡住＆＃34;到顶部。我使用 jQuery 来实现这一目标，直到现在我对结果非常满意，除了我面临的一些问题。

我会尝试用我的代码很好地解释我想要达到的目标，并且我还创建了一个小提琴来更好地解释我的请求：https://jsfiddle.net/Lc0rE/tom1qspq/1/

为方便阅读这个问题，下面我复制了我的小项目的JS代码。

这里有JS：

// Take the widths of the header
var headerWidths = [];

var headerRow = $('thead').children('tr').children('th');
$(headerRow).each(function() {
  headerWidths.push($(this).width());
});

// Create new div containing the header
$(".headerContainer").css("position", "absolute");
$('thead').clone().appendTo('.headerContainer table').removeClass("headerRow");
$(".headerRow").css("visibility", "hidden");

// Resizing the columns
$('.headerContainer thead th').each(function() {
  var i = $(this).index();

  $(this).attr("id", "header" + i);
  $('#header' + i).css("width", headerWidths[i]);
});

// Scroll event and repositioning
$(window).scroll(function(event) {
  var scrollY = $(window).scrollTop();
  $('.headerContainer').css('transform', 'translate(0px,' + scrollY + 'px )');
});

CSS：

table {
  white-space: nowrap;
  border-collapse: collapse;
  font-family: "Helvetica";
  font-weight: 200;
  background: white;
}

th,
tr,
td {
  border: 1px solid #CCC;
  padding: 3px;
}

thead {
  position: relative;
  background: black;
  color: white;
}

.mainContainer {
  width: auto;
  height: auto;
  overflow: auto;
  position: relative;
  top: 0;
}

.headerContainer {
  white-space: nowrap;
  border-collapse: collapse;
  font-family: "Helvetica";
  font-weight: 200;
}

.headerContainer thead tr th {
  display: inline-block;
  border: 1px solid #ccc;
}

问题

标题（.headerContainer）正在正确翻译，但我不希望表格内容在滚动时显示在标题后面...（为什么会发生这种情况？）< / p>
如果我将.mainContainer宽度和高度设置为固定大小（即500px / 500px），我的标题不能正确翻译（我认为他讨厌我......）

Answer 1

int prefetchCount = 4; // would be number of cores in actual app
channel.basicQos(prefetchCount);

您有// Take the widths of the header var headerWidths = []; var headerRow = $('thead').children('tr').children('th'); $(headerRow).each(function() { headerWidths.push($(this).width()); }); // Create new div containing the header $(".headerContainer").css("position", "absolute"); $('thead').clone().appendTo('.headerContainer table').removeClass("headerRow"); $(".headerRow").css("visibility", "hidden"); // Resizing the columns $('.headerContainer thead th').each(function() { var i = $(this).index(); $(this).attr("id", "header" + i); $('#header' + i).css("width", headerWidths[i]); }); // Scroll event and repositioning $(window).scroll(function(event) { var scrollY = $(window).scrollTop(); $('.headerContainer').css('transform', 'translate(0px,' + scrollY + 'px )'); }); /// you should to use that code IF (500:500) // Scroll event and repositioning //$(".mainContainer").scroll(function(event) { // var scrollY = $(".mainContainer").scrollTop(); // $('.headerContainer').css('transform', 'translate(0px,' + scrollY + 'px )'); //});在文档中了解详情。

使用jQuery修复HTML标头的问题

1 个答案: