js 固定表头和列

在 HTML 和 CSS 中，实现固定表头和列可以通过 `position: fixed` 属性来实现。但是，这种方式会导致表格的布局出现问题，并且在移动设备上显示效果不佳。

因此，建议使用 JavaScript 来实现固定表头和列的效果。以下是一种实现方式：

1. 获取表格元素和表头元素

var table = document.getElementById("myTable");
var header = table.getElementsByTagName("thead")[0];

2. 获取表格的滚动条位置

var topOffset = table.offsetTop;
var leftOffset = table.offsetLeft;
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

3. 监听表格的滚动事件，根据滚动条位置调整表头和列的位置

window.addEventListener("scroll", function() {
  if (scrollTop > topOffset) {
    header.style.position = "fixed";
    header.style.top = "0px";
    header.style.left = leftOffset - scrollLeft + "px";
  } else {
    header.style.position = "";
    header.style.top = "";
    header.style.left = "";
  }
  
  var cells = header.getElementsByTagName("th");
  for (var i = 0; i < cells.length; i++) {
    cells[i].style.left = cells[i].offsetLeft - scrollLeft + "px";
  }
});

这样，就可以实现固定表头和列的效果了。注意，这种实现方式需要考虑表格的边框、宽度、高度等因素，需要根据具体情况进行调整。