详解table表头固定

一、CSS实现table表头固定

在table标签上加入以下CSS，即可实现table表头固定：

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

thead,
tfoot {
  width: 100%;
  display: table;
  table-layout: fixed;
}

thead {
  width: calc(100% - 17px);
  overflow-y: scroll;
  height: 50px;
}

thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

以上代码分为三个部分实现：设置table宽度、th固定表头、滚动条悬浮。实现核心是thead、tfoot的设置。

首先，设置table宽度、border等样式；然后，设置thead、tfoot为display: table，可以保证它们的宽度和tbody一致。接着，设置thead的高度为50px，并将overflow-y设置为scroll，这样可以保证thead滚动时固定在顶部；稍后主要是针对thead进行设置。

在thead tr上设置display: table和table-layout: fixed可以保证thead的宽度和tbody的宽度一致和内容显示在一行内。对于thead下的th，则设置为position: sticky，top: 0，可以固定th在顶部，而z-index: 1的设置可以保证其在悬浮效果下不会被覆盖。

二、JavaScript实现table表头固定

使用JavaScript来实现table表头固定，可以自定义更多的功能，如滚动条宽度、表头样式等。

以下是代码实现：

(function() {
  var table = document.querySelector('table');
  var thead = table.querySelector('thead');
  var tr = table.querySelector('tr');
  var cells = tr.children;

  function fixTableHead() {
    var dim = table.getBoundingClientRect();
    var tableLeft = dim.left + window.pageXOffset;
    var tableWidth = dim.width;
    var thOffsets = getTHOffsets(cells);

    if (dim.top < 0) {
      thead.classList.add('fixed');
      thead.style.top = '0';
      thead.style.width = tableWidth + 'px';
      setOffsets(cells, thOffsets);
    } else if (thead.classList.contains('fixed')) {
      thead.classList.remove('fixed');
      setOffsets(cells, null);
    }

    function getTHOffsets(cells) {
      var offsets = [];
      for (var i = 0; i < cells.length; i++) {
        offsets.push(cells[i].getBoundingClientRect().left - tableLeft);
      }
      return offsets;
    }

    function setOffsets(cells, offsets) {
      for (var i = 0; i < cells.length; i++) {
        cells[i].style.width = offsets && offsets[i] ? offsets[i] + 'px' : '';
      }
    }
  }

  window.addEventListener('scroll', fixTableHead);
  window.addEventListener('resize', fixTableHead);
})();

以上代码会对table的表头进行定位，并根据滚动条的位置来判断表头是否需要固定。当表头被固定时，获取每个单元格的offsetLeft，根据offsetLeft来设置单元格的宽度样式，以保证内容与表头的宽度对齐。

三、移动设备中table表头固定

在移动设备中，尺寸较小，为了保证用户能够更好的浏览table，我们需要对table表头进行固定，以下是代码实现：

@media screen and (max-width: 599px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
    width: 100%;
  }
  thead tr {
    display:none;
  }
  td {
    border-top: 1px solid #ccc;
  }
  tbody tr {
    margin-bottom: 20px;
  }
  tbody tr:last-child {
    margin-bottom: 0;
  }
  tbody td:before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 50%;
    margin-left: 15px;
  }
}

以上代码通过媒体查询来对移动设备上的table进行样式设置。通过将table、thead、tbody、th、td、tr设置为display:block和width: 100%等样式，将table中的元素在移动设备中变成垂直排列，且全部占满一行。

因为在移动设备中，table的表头容易被遮挡，所以需要通过将thead tr设置为display:none，来将表头进行隐藏。同时，设置tbody tr和td之间的间距和边框等样式。最后通过before伪元素将每个单元格的内容向左偏移50%，在前面加上表头的label，这样达到表头悬浮内容的效果。

四、结语

以上是对table表头固定的三种实现方式。如果使用CSS或者JavaScript，我们可以自定义样式和功能，而在移动设备上，需要采取特殊的CSS样式来对table进行改造。需要根据自己的实际需求来选择。希望本文能够对您的学习和工作有所帮助。