html怎么实现表头不动

1. HTML实现表头不动

HTML（Hypertext Markup Language）是用于创建Web页面的标准语言，它的主要目的是为Web内容提供结构化标记。HTML的一个重要的用途是创建表格，将数据以表格的形式呈现出来。而在表格中，我们常常需要实现表头不动的效果，即表格上面的标题行固定在页面的顶部，当我们向下滚动页面时，标题行会一直保持在页面的顶部，以便于用户查看数据表格。

1.1 使用CSS实现表头不动

实现固定表头的方法有很多种，其中使用CSS是最常用的一种。具体的实现方法如下：

首先，在HTML中创建一个表格，如下所示：

<table>
   <thead>
       <tr>
           <th>姓名</th>
           <th>性别</th>
           <th>年龄</th>
           <th>籍贯</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>张三</td>
           <td>男</td>
           <td>28</td>
           <td>北京</td>
       </tr>
       <tr>
           <td>李四</td>
           <td>女</td>
           <td>25</td>
           <td>上海</td>
       </tr>
       <tr>
           <td>王五</td>
           <td>男</td>
           <td>30</td>
           <td>广州</td>
       </tr>
   </tbody>
</table>

然后，使用CSS中的position和top属性来实现表头固定。代码如下：

<style>
   table {
       width: 100%;
       border-collapse: collapse;
   }
   th, td {
       border: 1px solid #000;
       padding: 5px;
   }
   thead th {
       position: fixed;
       top: 0;
       background-color: #fff;
   }
</style>

在上面的CSS代码中，我们使用了position属性将表头固定在页面的顶部，使用top属性指定表头距离页面顶部的距离。需要注意的是，固定表头时，表头的背景颜色需要设置为白色，否则会出现重叠的问题。

此时，再将页面向下滚动，就可以看到表头固定在页面顶部的效果了。

1.2 使用JavaScript实现表头不动

除了使用CSS实现表头不动外，我们还可以使用JavaScript来实现这一功能。具体的实现方法如下：

首先，在HTML中创建一个表格，如下所示：

<table id="table">
   <thead>
       <tr>
           <th>姓名</th>
           <th>性别</th>
           <th>年龄</th>
           <th>籍贯</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>张三</td>
           <td>男</td>
           <td>28</td>
           <td>北京</td>
       </tr>
       <tr>
           <td>李四</td>
           <td>女</td>
           <td>25</td>
           <td>上海</td>
       </tr>
       <tr>
           <td>王五</td>
           <td>男</td>
           <td>30</td>
           <td>广州</td>
       </tr>
   </tbody>
</table>

然后，在JavaScript中将表头固定。代码如下：

<script>
   var table = document.getElementById('table');
   var thead = table.getElementsByTagName('thead')[0];
   var tbody = table.getElementsByTagName('tbody')[0];
   var tr = thead.getElementsByTagName('tr')[0].cloneNode(true);
   var ths = tr.getElementsByTagName('th');
   for (var i = 0; i < ths.length; i++) {
       ths[i].style.width = ths[i].offsetWidth + 'px';
   }
   var holder = document.createElement('div');
   holder.appendChild(thead.cloneNode(true));
   holder.style.position = 'fixed';
   holder.style.top = 0;
   holder.style.left = table.getBoundingClientRect().left + 'px';
   holder.style.width = table.offsetWidth + 'px';
   holder.style.height = thead.offsetHeight + 'px';
   holder.style.zIndex = 999;
   holder.style.background = '#fff';
   document.body.appendChild(holder);
   window.addEventListener('scroll', function() {
       if (tbody.getBoundingClientRect().top <= holder.offsetHeight) {
           holder.style.top = holder.offsetHeight - tbody.getBoundingClientRect().top + 'px';
       } else if (tbody.getBoundingClientRect().top > holder.offsetHeight) {
           holder.style.top = 0;
       }
   });
</script>

在上面的JavaScript代码中，我们首先获取了table、thead、tbody等元素，然后将thead复制一份，并设置其position为fixed，top为0，left为表格距离页面左侧的距离。然后将复制出来的thead插入到一个div中，并将该div添加到body中。最后，在window的scroll事件中，动态的设置thead的位置，实现表头固定的效果。

2. 总结

本文介绍了如何使用CSS和JavaScript实现表头不动的效果。使用CSS的方法比较简单，只需要设置一下样式即可，但是需要注意固定表头时的背景色问题。使用JavaScript的方法相对来说稍微复杂一些，需要进行一些计算，但是也比较灵活，可以根据需求进行调整。

在实际的开发中，我们可以根据具体的情况选择使用CSS或JavaScript来实现表头不动的效果。