本文目录导读：

1. 使用CSS固定表头
2. 使用JavaScript固定表头
3. 使用表格插件
4. FAQs

在处理大量数据时,表格是一个非常有用的工具，当表格内容过长时，表头可能会随着滚动而移动，这给阅读和理解数据带来不便，为了解决这个问题，我们可以通过以下几种方法来设置表头不动。

使用CSS固定表头

通过CSS样式,我们可以将表头固定在表格的顶部，使其在滚动时保持不动，以下是一个简单的示例：

CSS代码示例

table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  background-color: #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 10;
}
tbody tr {
  border-bottom: 1px solid #ddd;
}
tbody tr:last-child {
  border-bottom: none;
}

HTML代码示例

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
      <td>北京</td>
    </tr>
    <!-- 更多行数据 -->
  </tbody>
</table>

使用JavaScript固定表头

除了CSS方法,我们还可以使用JavaScript来实现表头固定的效果，以下是一个使用JavaScript固定表头的示例：

JavaScript代码示例

document.addEventListener("DOMContentLoaded", function() {
  var table = document.querySelector("table");
  var thead = table.createTHead();
  var tbody = table.createTBody();
  var rows = table.rows;
  // 创建表头
  for (var i = 0; i < rows[0].cells.length; i++) {
    var th = document.createElement("th");
    th.textContent = rows[0].cells[i].textContent;
    thead.appendChild(th);
  }
  // 创建表格内容
  for (var i = 1; i < rows.length; i++) {
    var tr = document.createElement("tr");
    for (var j = 0; j < rows[i].cells.length; j++) {
      var td = document.createElement("td");
      td.textContent = rows[i].cells[j].textContent;
      tr.appendChild(td);
    }
    tbody.appendChild(tr);
  }
  // 固定表头
  thead.style.position = "fixed";
  thead.style.top = "0";
  thead.style.zIndex = "10";
});

使用表格插件

现在有很多现成的表格插件可以帮助我们实现表头固定的功能,例如Bootstrap的Table插件，以下是一个使用Bootstrap Table插件的示例：

HTML代码示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="myTable" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
      <td>北京</td>
    </tr>
    <!-- 更多行数据 -->
  </tbody>
</table>
<script>
$(document).ready(function() {
  $('#myTable').DataTable();
});
</script>

FAQs

Q1：为什么我的表头没有固定？

A1： 确保你的CSS代码正确应用到了表格的表头元素上，如果使用JavaScript或插件，请检查代码是否正确执行，并且没有错误。

Q2：固定表头后，表格内容如何滚动？

A2： 当表头固定后，表格内容会自动滚动，用户可以通过滚动条查看不同行数据，确保你的表格宽度足够大，以便用户可以滚动查看所有列。