CSS实现固定首列和表头

已于 2023-12-20 15:07:26 修改
阅读量2.3k 收藏 8
点赞数 6
分类专栏： # html+css 文章标签： css css3 html
于 2023-02-16 16:51:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44828720/article/details/129065207
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>首行首列固定</title>
  <style>
    /*外层div，设置宽高度*/
    div {
      width: 90vw;
      height: 90vh;
      border: 1px solid #dcdee2;
      overflow: auto;
    }

    table {
      border-collapse: separate;
      /*设置边框会被分开，而不是合并*/
      table-layout: fixed;
      /*列宽由表格宽度和列宽度设定。*/
      width: 100%;
      word-wrap: break-word;
    }

    td,
    th {
      border-right: 1px solid #dcdee2;
      border-bottom: 1px solid #dcdee2;
      height: 30px;
      text-align: center;
      background-color: #fff;
    }

    /* 固定表头 */
    thead {
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    /* th {
      background-color: #ccc;
    } */

    /* 首列 */
    tbody tr td:first-child {
      position: sticky;
      left: 0;
      z-index: 100;
    }

    /* 最左上角 */
    .t1 {
      position: sticky;
      left: 0;
      z-index: 1000;
    }

    .shadow-y {
      height: 90vh;
      width: 2px;
      position: absolute;
      top: 0px;
      right: 0;
      z-index: 10000;
      box-shadow: 2px 0 2px 0px rgba(0, 0, 0, 0.2);
    }

    .shadow-x {
      height: 2px;
      width: 90vw;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 10000;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>

<body>
  <div>
    <table cellspacing="0" cellpadding="0">
      <colgroup>
        <col style="width: 150px" />
        <col style="width: 150px" />
        <col style="width: 142px" />
        <col style="width: 141px" />
        <col style="width: 180px" />
        <col style="width: 150px" />
        <col style="width: 144px" />
        <col style="width: 140px" />
        <col style="width: 144px" />
        <col style="width: 144px" />
        <col style="width: 144px" />
        <col style="width: 144px" />
      </colgroup>
      <thead>
        <tr>
          <th rowspan="4" class="t1">
            最左上角
            <span class="shadow-y"></span>
            <span class="shadow-x"></span>
          </th>
          <th colspan="2">一级表头</th>
          <th colspan="5">一级表头</th>
          <th>一级表头</th>
          <th>一级表头</th>
          <th>一级表头</th>
          <th>一级表头</th>
        </tr>
        <tr>
          <!-- 必须 style="z-index: 10;" 值小于最左上角的-->
          <th style="z-index: 10;">二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
        </tr>
        <tr>
          <!-- 必须 style="z-index: 10;" 值小于最左上角的-->
          <th colspan="4" style="z-index: 10;">三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>首列</td>
          <td>text2222222222222222222222222222</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>
[猫玖]
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css固定table表头的实现代码可同时看到表头和表格底部
09-25
一次性将数据全部显示出来，页面就会出现滚动条，这样的话就不能同时看到表头信息和表格底部的数据记录,把表头固定可以解决此问题
css 固定表头
u010865136的专栏
04-03 543
表明该元素将固定在距离视口顶部的位置，即保持在屏幕的顶部。这通常用于实现类似固定表头、固定导航栏等效果。类名的元素设置为粘性定位（sticky positioning），并让其距离视口顶部（top）为 0。页面条数太多，下滑动时，表头上去了，想要将表头固定在顶部，锁住表头。粘性定位使得元素在滚动到特定位置时会固定在屏幕上。表格表头那一行tr中添加如下属性。，这段代码的作用是将具有。
uni-app下表格纯CSS方案的固定首行首列，最简单的实现方式
最新发布
taihom的专栏
06-14 361
网上找了很多表格组件，都太复杂了，下面是一个最简单的实现方式
纯CSS实现Table固定表头和首列
热门推荐
Ghjkku的博客
09-15 8万+
HTML结构上，必须将 放在 子节点，且内部不要有其他 position 设置。Table固定表头和首列这种需求应该比较常见。以往的做法，需要写一大堆脚本，而现在，可以使用position:sticky轻松实现这个效果。
简单css实现表格头部固定
山外小楼
09-16 2523
简单css实现表格头部固定
最简单的纯css固定table的表头
yfx000的专栏
06-01 5084
页面table通常都需要做表头固定，参考了n种实现方式，最终还是选择了用纯css来做表头固定，只是因为方便，易于调试。
vue表格实现固定表头首列
11-02
4. **固定首列**：固定首列相对复杂，因为涉及到表格的列宽计算。一种常见的做法是复制首列到一个新的`div`中，这个`div`位于表格上方，具有相同的样式，但不会随表格滚动。同样，需要处理好宽度和定位问题，确保与...
Vue多种方法实现表头和首列固定的示例代码
11-27
同样，对于固定首列和A1单元格，我们需要创建另外两个表格，分别设置相应的CSS样式和Vue数据属性`fixedCol`和`fixedA1`来控制它们的显示。这里的关键是使用`v-if`指令根据Vue数据属性的值来决定是否显示这些固定表格...
移动端table固定表头与固定第一列
02-20
本教程将详细讲解如何在移动端实现"固定表头与固定第一列"的功能，以提升用户体验，使得用户在滚动时能够始终保持表头和第一列可见。 首先，我们需要理解HTML5中的`<table>`元素，它是用于创建表格的标准标签。在...
h5 固定表头及列头demo
12-01
分析这个文件可以更深入地理解实现固定表头和列头的具体步骤。 总的来说，"h5 固定表头及列头demo"是一个实用的示例，它结合了H5、CSS和JavaScript的技术，以实现对长表格的优化显示。通过学习和理解这个示例，...
超简单纯css固定表头
03-27 401
* 隐藏滚动条*************************************************** */
纯CSS固定table表头
海天鹰
05-01 345
【代码】纯CSS固定table表头。
table固定首行首列css 最简单方法（亲测可用）
weixin_49798182的博客
05-30 4374
业务需要前端使用html 写了个table 如图： 需要滚动条上下左右滑动，但是固定首航首列关键代码：/* 首列固定 */left: 0;z-index: 1;/* 表头固定 */top: 0;z-index: 2;/* 表头首列强制最顶层 */z-index: 3;解析：关键属性 css :在 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将固定在与顶部距离 0px 的位置，直到视口回滚到阈值以下；同理。
纯CSS实现Table固定表头和首尾列以及表格边框设置
qq_39167934的博客
02-10 881
【代码】纯CSS实现Table固定表头和首尾列以及表格边框设置。
纯CSS实现表头固定
weixin_33725272的博客
11-06 115
为什么80%的码农都做不了架构师？>>> ...
前端页面Table CSS实现固定表头表首行和固定列拖动固定
小熊猫
05-11 3116
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
table表头固定，内容滚动
weixin_44037153的博客
04-14 3980
第一种方法通过overflow属性实现，第二种方法通过position属性实现。
css实现table表头和列固定功能
sumimg的博客
12-15 814
项目需要用表格展示数据，要求表头和左边两列能够在滚动的时候固定，考虑到目前开源的table组件库冗余了太多项目不需要的功能，其次也是为了防止数据过多的时候渲染太慢，于是决定用html和css实现。根据MDN的描述，table-layout用于定义了用于布局表格单元格，行和列的算法，fixed属性值用于表示某一列的宽度仅由该列首行的单元格决定。属性，设置第一行和左右两列粘性定位，其中第二列的偏移量根据第一列的宽度决定，以此类推，如果有三列固定，需要知道前两列的宽度。高度要自适应（table默认支持）
CSS—table—固定列和行
m0_37616866的博客
08-11 3811
为了方便用户在使用table表格，可以参照头部或侧边的固定字段，更快的定位数据的对应的意思，故 本文使用纯CSS实现头部和侧边固定相关案例，共大家学习交流。
ie浏览器实现table固定列纯css
01-07
要在IE浏览器中实现table固定列，可以通过使用纯CSS的方式来实现。首先，需要给table设置一个固定的宽度，并将其position属性设置为relative，这样可以确保table的布局不会受到影响。接下来，需要创建两个div元素，一个用作table的表头，一个用作table的内容。然后使用CSS来设置表头div的position属性为absolute，让它固定在table的顶部，同时将z-index属性设置得比table的z-index更高，以确保表头始终显示在最顶层。接着，可以通过设置表格内容的margin-top属性，将其下移与表头对齐，从而达到固定列的效果。 为了实现表头和表格内容的对齐，可以在CSS中设置表头和表格内容的宽度、高度以及字体大小等属性，以确保它们能够完美匹配，从而实现固定列的效果。当然，这只是一个基本的实现方法，具体的实现方式可能还需要根据具体的table结构和需求来进行调整和优化。总的来说，通过一些简单的CSS样式设置，就可以在IE浏览器中实现table固定列的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

[猫玖]

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值