如何固定html表格头部，用css样式即可实现，操作简便、代码简单-阿里云开发者社区

如何固定html表格头部，用css样式即可实现，操作简便、代码简单

2024-01-16 74

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 如何固定html表格头部，用css样式即可实现，操作简便、代码简单

首先创建一个表格

表头：

<div class="table_box">
  <table cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th><input type="checkbox" class="thItem" onclick="fn(this)"></th>
        <th>姓名</th>
        <th>岗位工资</th>
        <th>岗位级别</th>
        <th>性别</th>
        <th>生日</th>
        <th>手机号</th>
        <th>身份证号</th>
        <th>项目名称</th>
        <th>公司名称</th>
        <th>政治面貌</th>
        <th>籍贯</th>
        <th>学历</th>
        <th>创建时间</th>
        <th>员工状态</th>
        <th>用工形式</th>
        <th>现合同到期时间</th>
        <th>现合同期限</th>
        <th>银行卡卡号</th>
        <th>工资卡开户行</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="tb">
    </tbody> 
    </table>
</div>

tbody部分直接使用js，意思是使用循环在表格的主体部分加入了表格标签，不用大量的去复制空格子（其实就是up比较懒 (o▽｀o) ）

<script>
      let inp = document.getElementById("tb")
      let str = ""
      for(let i = 0 ; i < 20 ; i++){
        str += `<tr>
          <td><input type="checkbox" class="thItem""></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>`
      }
      inp.innerHTML = str
    </script>

添加基本的css样式：

<style>
      .table_box{
        width: 1632px;
        overflow: scroll;
      }
      table{
        width: 3000px;
      }
      td,th{
        border: 1px solid #777;
        width: 200px;
      }
      td{
        height: 30px;
        text-align: center;
      }
    </style>

效果：

下面添加css样式，给需要固定的地方加粘性定位sticky

使用伪类选择器进行选定元素：

/* 第一列 */
      thead>tr>th:first-child{
        position: sticky;
        left: 0;
        background-color: rgb(240, 240, 240);
      }
      tbody>tr>td:first-child{
        position: sticky;
        left: 0;
        background-color: rgb(240, 240, 240);
      }
      /* 第二列 */
      thead>tr>th:nth-child(2){
        position: sticky;
        left: 144px;
        background-color: rgb(240, 240, 240);
      }
      tbody>tr>td:nth-child(2){
        position: sticky;
        left: 144px;
        background-color: rgb(240, 240, 240);
      }
    /* 最后一列 */
      thead>tr>th:last-child{
        position: sticky;
        right: 0;
        background-color: rgb(240, 240, 240);
      }
      tbody>tr>td:last-child{
        position: sticky;
        right: 0;
        background-color: rgb(240, 240, 240);
      }

效果：

完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
      .table_box{
        width: 1632px;
        overflow: scroll;
      }
      table{
        width: 3000px;
      }
      td,th{
        border: 1px solid #777;
        width: 200px;
      }
      td{
        height: 30px;
        text-align: center;
      }
      /* 第一列 */
      thead>tr>th:first-child{
        position: sticky;
        left: 0;
        background-color: rgb(240, 240, 240);
      }
      tbody>tr>td:first-child{
        position: sticky;
        left: 0;
        background-color: rgb(240, 240, 240);
      }
      /* 第二列 */
      thead>tr>th:nth-child(2){
        position: sticky;
        left: 144px;
        background-color: rgb(240, 240, 240);
      }
      tbody>tr>td:nth-child(2){
        position: sticky;
        left: 144px;
        background-color: rgb(240, 240, 240);
      }
      /* 最后一列 */
      thead>tr>th:last-child{
        position: sticky;
        right: 0;
        background-color: rgb(240, 240, 240);
      }
      tbody>tr>td:last-child{
        position: sticky;
        right: 0;
        background-color: rgb(240, 240, 240);
      }
    </style>
  </head>
  <body>
    <div class="table_box">
      <table cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th><input type="checkbox" class="thItem" onclick="fn(this)"></th>
            <th>姓名</th>
            <th>岗位工资</th>
            <th>岗位级别</th>
            <th>性别</th>
            <th>生日</th>
            <th>手机号</th>
            <th>身份证号</th>
            <th>项目名称</th>
            <th>公司名称</th>
            <th>政治面貌</th>
            <th>籍贯</th>
            <th>学历</th>
            <th>创建时间</th>
            <th>员工状态</th>
            <th>用工形式</th>
            <th>现合同到期时间</th>
            <th>现合同期限</th>
            <th>银行卡卡号</th>
            <th>工资卡开户行</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tb">
        </tbody>
      </table>
    </div>
    <script>
      let inp = document.getElementById("tb")
      let str = ""
      for(let i = 0 ; i < 20 ; i++){
        str += `<tr>
          <td><input type="checkbox" class="thItem""></td>
          <td>张三</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>备注</td>
        </tr>`
      }
      inp.innerHTML = str
    </script>
  </body>
</html>

此文所实现的效果为纯css，适合新手，操作简单，如果使用js实现此效果的话会更加美观、简便，以后有机会还会一同分享有关js的实现方法 (▽｀)

谢谢观看(/≧▽≦)/

如何固定html表格头部，用css样式即可实现，操作简便、代码简单

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

如何固定html表格头部，用css样式即可实现，操作简便、代码简单

热门文章

最新文章

相关课程

相关电子书

相关实验场景