詳解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進行改造。需要根據自己的實際需求來選擇。希望本文能夠對您的學習和工作有所幫助。