1. Python技术站首页
  2. css

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

• css

要实现固定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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 10个CSS简写/优化技巧整理

    以下是“10个CSS简写/优化技巧整理”的完整攻略。 1. 使用CSS缩写 使用缩写可以使CSS更简洁，提高代码的可读性和易维护性。以下是一些常见的CSS缩写： padding: 10px 20px 30px 40px; 可以缩写为 padding: 10px 20px 30px; background-color: #ffffff; 可以缩写为 backg…

    css 2023年6月9日
    00

  • CSS元素居中布局的简单方法

    让我详细讲解一下“CSS元素居中布局的简单方法”的完整攻略。 一、使用Flexbox布局方式进行元素居中 Flexbox是CSS3中新增的一种布局方式，它可以方便地实现元素居中布局。以下是使用Flexbox进行元素居中的简单方法。 1. 将容器标记设置为Flex布局 要使用Flexbox布局方式，我们需要将元素的父容器标记设置为display: flex，这…

    css 2023年6月10日
    00

  • CSS list-style修改列表属性控制li标签样式

    下面是关于“CSS list-style修改列表属性控制li标签样式”的完整攻略。 1. 简介 在网页开发中，常常需要使用到列表。而对于列表，除了默认的样式之外，我们还可以通过CSS的list-style属性来修改它的样式。list-style属性是一个缩写属性，可以同时设置列表的样式、位置和图案类型。 具体而言，list-style属性由3个单独的属性组成…

    css 2023年6月10日
    00

  • XHTML 2.0新功能抢先预览

    XHTML 2.0是一种为Web开发而设计的标记语言，它在原有XHTML 1.0的基础上进行了改进和完善。本篇攻略将为大家介绍XHTML 2.0的新功能以及如何使用这些新功能来制作更加高效的网站。 1. 概述 XHTML 2.0相比之前的版本在许多方面都进行了改进，在结构、标记语义、表单控件和模块化等方面都有所升级。下面将详细介绍XHTML 2.0的各项新功…

    css 2023年6月9日
    00

  • webpack5的loader配置小白学习篇

    一、什么是Webpack Loader Webpack是一个模块打包工具，可以将各种资源文件（JS、CSS、图片等）打包成网页中的静态资源。但是Webpack只认识JS文件，如果我们直接把CSS文件或图片文件引入到JS文件中，Webpack就会报错。这时就需要使用Webpack Loader，将Webpack不认识的文件转化成Webpack能够识别的模块。 …

    css 2023年6月9日
    00

  • 利用HTML+CSS实现跟踪鼠标移动功能

    实现跟踪鼠标移动功能一般有两种方式：一种是利用JavaScript编写鼠标移动事件处理程序，另一种是结合HTML和CSS来实现。这里我们讨论的是后者。 实现过程： 首先需要创建一个HTML文档，并在文档中添加一个div元素，用于表示跟踪鼠标移动的效果。 <!DOCTYPE html> <html> <head> <t…

    css 2023年6月10日
    00

  • 第一次记录Bootstrap table学习笔记（1）

    针对网站的文章“第一次记录Bootstrap table学习笔记（1）”，我整理了以下完整攻略： 第一步：阅读文章 首先应该认真阅读文章，理解作者写作的目的。在阅读的过程中，我们可以借助markdown的编写方式，使用标题、加粗、斜体等方式标注出重点、关键字等。同时我们需要重点关注文章中的示例代码。 第二步：理解Bootstrap table 在阅读文章后，…

    css 2023年6月10日
    00

  • css属性让网页文字实现竖排的几种方法

    下面我来详细讲解一下”CSS属性让网页文字实现竖排的几种方法”的完整攻略。 什么是竖排文字？ 竖排文字（Vertical writing）就是将文字竖直排列的一种写作方式，又称为竖排版或纵排版。 实现竖排文字的CSS属性 CSS提供了一些属性来实现竖排文字，下面就来详细介绍一下： writing-mode属性 writing-mode属性控制文本的书写模式。…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部