利用js+css+html实现固定table的列头不动

要实现固定table的列头不动，可以结合使用js、css和html技术来实现。具体步骤如下：

第一步：HTML结构设计

在HTML中，我们需要将表格元素进行划分，将表头和表体分别拆分成两个表格区域。例如，以下是一个名为"fixedTable"的表格，已经被划分为header和body两个部分。

<div class="table-wrap">
  <table class="fixedTable">
    <thead>
      <tr>
        <th>列头1</th>
        <th>列头2</th>
        <th>列头3</th>
      </tr>
    </thead>
  </table>
  <div class="table-body">
    <table class="fixedTable-body">
      <tbody>
        <tr>
          <td>列1</td>
          <td>列2</td>
          <td>列3</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

第二步：CSS样式设置

接下来，我们需要使用一些CSS样式来设置表格，实现固定表头。给定以下CSS样式：

.table-wrap {
  overflow-x: auto;
}

.fixedTable {
  width: 100%;
  table-layout: fixed;
}

.fixedTable thead th,
.fixedTable tbody td {
  padding: 10px;
  text-align: left;
}

.fixedTable thead th {
  background-color: #f6f6f6;
  position: sticky;
  top: 0;
  border: 1px solid #ddd;
}

.table-body {
  overflow-y: auto;
  height: 200px;
}

.fixedTable-body {
  width: 100%;
  table-layout: fixed;
}

.fixedTable-body tbody td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}

解析一下这个样式：

给 .table-wrap 设置 overflow-x: auto；
position: sticky; top: 0; 让表头在滚动时固定在顶部；
给表格设置 table-layout: fixed，使得每一列拥有相同的宽度，适配不同的屏幕；
设置表体的高度，并且设置 overflow-y: auto，当表格内容超出高度时，显示滚动条。

第三步：JavaScript脚本实现

默认情况下，表头和表体是两个独立的表格区域，因此需要将两者的每一列对齐。我们可以通过遍历表头行中的每一个单元格，将它们的宽度应用到相应的表体单元格中。

var table = document.querySelector('.table-wrap'),
    thead = table.querySelector('.fixedTable thead'),
    tbody = table.querySelector('.fixedTable-body tbody');

var tbodyTd = tbody.querySelectorAll('td');

for (var i = 0, len = thead.rows[0].cells.length; i < len; i++) {
  var th = thead.rows[0].cells[i],
      td = tbodyTd[i];

  td.style.width = th.offsetWidth + 'px';
}

以上代码将第一个表头行中的每个单元格与表体的对应单元格绑定起来，并将表体单元格的宽度设置为表头单元格的宽度。这确保了表头和表体的每个列都拥有相同的尺寸，并且当用户水平滚动表格时，它们会完美对齐。

如果你需要使用jQuery库来实现这个功能，可以参考以下的实现方法：

var thead = $(".fixedTable thead"),
    tbody = $(".fixedTable tbody");

tbody.scroll(function() {
  thead.css("transform", "translateY("+this.scrollTop+"px)");
});

以上代码使用了scrollTop方法和CSS3的transform属性来实现表头固定。当表格上下滚动时，通过 scrollTop 获取滚动距离，并将其应用到表头的 translateY 偏移上，以实现固定表头的效果。

示例说明

以下两个示例分别演示了如何使用JavaScript原生API和jQuery库来实现固定table的列头不动。

示例1（JavaScript原生API）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>固定table列头不动</title>
  <style>
    .table-wrap {
      overflow-x: auto;
    }

    .fixedTable {
      width: 100%;
      table-layout: fixed;
    }

    .fixedTable thead th,
    .fixedTable tbody td {
      padding: 10px;
      text-align: left;
    }

    .fixedTable thead th {
      background-color: #f6f6f6;
      position: sticky;
      top: 0;
      border: 1px solid #ddd;
    }

    .table-body {
      overflow-y: auto;
      height: 200px;
    }

    .fixedTable-body {
      width: 100%;
      table-layout: fixed;
    }

    .fixedTable-body tbody td {
      padding: 10px;
      text-align: left;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="table-wrap">
    <table class="fixedTable">
      <thead>
        <tr>
          <th>列头1</th>
          <th>列头2</th>
          <th>列头3</th>
        </tr>
      </thead>
    </table>
    <div class="table-body">
      <table class="fixedTable-body">
        <tbody>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script>
    var table = document.querySelector('.table-wrap'),
        thead = table.querySelector('.fixedTable thead'),
        tbody = table.querySelector('.fixedTable-body tbody');

    var tbodyTd = tbody.querySelectorAll('td');

    for (var i = 0, len = thead.rows[0].cells.length; i < len; i++) {
      var th = thead.rows[0].cells[i],
          td = tbodyTd[i];

      td.style.width = th.offsetWidth + 'px';
    }
  </script>
</body>
</html>

示例2（jQuery库）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>固定table列头不动</title>
  <style>
    .table-wrap {
      overflow-x: auto;
    }

    .fixedTable {
      width: 100%;
      table-layout: fixed;
    }

    .fixedTable thead th,
    .fixedTable tbody td {
      padding: 10px;
      text-align: left;
    }

    .fixedTable thead th {
      background-color: #f6f6f6;
      position: sticky;
      top: 0;
      border: 1px solid #ddd;
    }

    .table-body {
      overflow-y: auto;
      height: 200px;
    }

    .fixedTable-body {
      width: 100%;
      table-layout: fixed;
    }

    .fixedTable-body tbody td {
      padding: 10px;
      text-align: left;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <div class="table-wrap">
    <table class="fixedTable">
      <thead>
        <tr>
          <th>列头1</th>
          <th>列头2</th>
          <th>列头3</th>
        </tr>
      </thead>
    </table>
    <div class="table-body">
      <table class="fixedTable-body">
        <tbody>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
          <tr>
            <td>列1</td>
            <td>列2</td>
            <td>列3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    var thead = $(".fixedTable thead"),
        tbody = $(".fixedTable tbody");

    tbody.scroll(function() {
      thead.css("transform", "translateY("+this.scrollTop+"px)");
    });
  </script>
</body>
</html>

这两个示例都使用了相同的HTML结构和CSS样式设计，但是它们分别使用了不同的JavaScript语言实现表头固定。本质上，它们都是采用了类似的原理，通过遍历表头和表体单元格，实现表头元素在滚动时固定，保留表格的良好体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用js+css+html实现固定table的列头不动 - Python技术站