前端表格固定表头：两种实现方法 - CSS 和 JavaScript

前端表格固定表头是指在表格中，表头部分在滚动时保持固定不动，使用户在浏览大量数据时能够方便地查看表头信息。

实现前端表头固定有多种方法，以下是两种常见的实现方式：

1. 使用 CSS 样式：通过设置表格头部的 CSS 样式，使其在滚动时保持固定。可以使用'position: fixed'属性来固定表头位置，并设置'top'和'left'属性来确定表头的位置。然后使用'z-index'属性确保表头显示在表格内容之上。

.table-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

2. 使用 JavaScript：通过监听滚动事件，在滚动时动态改变表头的位置。可以使用 JavaScript 代码获取表格头部的位置，并在滚动时动态更新表头的位置。

window.addEventListener('scroll', function() {
  var tableHeader = document.querySelector('.table-header');
  var tableOffsetTop = document.querySelector('.table').offsetTop;
  
  if (window.pageYOffset > tableOffsetTop) {
    tableHeader.style.position = 'fixed';
    tableHeader.style.top = '0';
  } else {
    tableHeader.style.position = 'static';
  }
});

无论使用哪种方法，都需要确保表格内容的高度超过表头的高度，以便在滚动时能够正确显示表头。此外，还可以考虑使用 CSS 或 JavaScript 来调整表格的宽度，以适应页面的大小变化。