使用position:stickey固定表格左边列与表格标题

已于 2022-05-26 09:06:24 修改
阅读量594 收藏 1
点赞数 1
分类专栏： # HTML CSS 文章标签： css css3 html
于 2022-05-26 09:04:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kouzuhuai2956/article/details/124978144
版权
  • 序号列与课程名称列为固定列，thead行为固定行
  • position:stickey 会与表格的 border collapse样式冲突，所以使用 box-shadow样式来做表格的边框样式。

在这里插入图片描述

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      z-index: auto !important;
      height: 100vh;
      color: #222;
      overflow-anchor: none;
      margin: 0;
      padding: 0;
    }

    .sticky-box {
      overflow: auto;
      max-height: 100%;
      max-width: 100%;
      /* position: absolute */
    }

    .sticky-box .info-table {
      border-collapse: collapse;
    }

    .sticky-box .info-table thead tr th,
    .sticky-box .info-table tbody tr td {
      /*用阴影创建边框线*/
      box-shadow: inset -1px -1px 0 0 #ebeef5;
      font-size: 12px;
      padding: 6px;
      white-space: nowrap;
      text-align: center;
      position: relative;
    }

    .sticky-box .info-table thead tr th,
    .sticky-box .info-table tbody tr:nth-child(even) td {
      background-color: #fafafa;
    }


    .sticky-box .info-table tbody tr:nth-child(odd) td {
      background-color: #fff;
    }

    .sticky-box .info-table thead {
      position: sticky;
      top: 0;
      background-color: #fafafa;
      z-index: 3;
    }

    .sticky-box .info-table thead tr:nth-child(1) th:nth-child(1),
    .sticky-box .info-table tbody tr td:nth-child(1) {
       /*固定第一列的宽度*/
      width: 36px;
    }

    .sticky-box .info-table thead tr:nth-child(1) th:nth-child(1),
    .sticky-box .info-table thead tr:nth-child(1) th:nth-child(2),
    .sticky-box .info-table tbody tr td:nth-child(1),
    .sticky-box .info-table tbody tr td:nth-child(2) {
      position: sticky;
      left: 0;
      z-index: 2;
    }

    .sticky-box .info-table thead tr:nth-child(1) th:nth-child(2),
    .sticky-box .info-table tbody tr td:nth-child(2) {
       /*值等于第一列的宽度*/
      left: 36px;
    }

    .sticky-box .info-table tbody tr td label {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .sticky-box .info-table tbody tr td input,
    .sticky-box .info-table tbody tr td input+span {
      display: none;
    }

    .sticky-box .info-table tbody tr td input:checked+span {
      display: block;
      padding-top: 6px;
    }
  </style>
</head>

<body>
  <div class="sticky-box">
    <table class="info-table">
      <thead>
        <tr>
          <th rowspan="2">序号</th>
          <th rowspan="2">课程名称</th>
          <th colspan="2">GR1</th>
          <th colspan="2">GR2</th>
          <th colspan="2">GR3</th>
          <th colspan="2">GR4</th>
          <th colspan="2">GR5</th>
          <th colspan="2">GR6</th>
          <th colspan="2">GR7</th>
          <th colspan="2">GR8</th>
          <th colspan="2">GR9</th>
          <th colspan="2">GR10</th>
          <th rowspan="2">GR11</th>
        </tr>
        <tr>
          <th>GR1-1</th>
          <th>GR1-2</th>
          <th>GR2-1</th>
          <th>GR2-2</th>
          <th>GR3-1</th>
          <th>GR3-2</th>
          <th>GR4-1</th>
          <th>GR4-2</th>
          <th>GR5-1</th>
          <th>GR5-2</th>
          <th>GR6-1</th>
          <th>GR6-2</th>
          <th>GR7-1</th>
          <th>GR7-2</th>
          <th>GR8-1</th>
          <th>GR8-2</th>
          <th>GR9-1</th>
          <th>GR9-2</th>
          <th>GR10-1</th>
          <th>GR10-2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>计算机基计算机基计算机基计算机基础（1）</td>
          <td>
            <label>
              <input type="checkbox" name="origin" checked />
              <span>√</span>
            </label>
          </td>
          <td>
            <select>
              <option value="">不设置</option>
              <option value="H">H</option>
              <option value="M">M</option>
              <option value="L">L</option>
            </select>
          </td>
          <td>
            <select style="display: none;">
              <option value="">不设置</option>
              <option value="H">H</option>
              <option value="M">M</option>
              <option value="L">L</option>
            </select>
            <span>M</span>
          </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>
        <tr>
          <td>2</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>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>3</td>
          <td>
            计算机基础（3）
          </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>
          <td></td>
        </tr>
        <tr>
          <td>4</td>
          <td>计算机基础（4）</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>
          <td></td>
        </tr>
        <tr>
          <td>5</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>6</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
        <tr>
          <td>7</td>
          <td>计算机基础（2）</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>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>
草木红
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
floater:JavaScript为表格创建浮动的固定标题和列
05-16
浮子 表的固定/粘性标题和左列 查看html / index.html的用法。 演示位于此处 一个小JavaScript文件，它实现了粘滞表标题和左粘滞列，使您可以在EXCEL-Spreadsheets中找到冻结窗格功能。 这是通过使用表标题，所有左列和左上角的副本作为左列的标题来实现的。 然后，根据元素和滚动方向，使用style.position值“ fixed”或“ absolute”将这些元素放在表格的顶部或左侧。 有关用法和实现的详细信息，请参见文件index.html和float.js 一个非常简单的概述位于 * 2014年1月15日 添加了功能，使冻结的标题和列标题与相关表单元格中的内容和几何形状更改保持同步。 截至2015年1月7日，该产品已在： IE , Chrome FireFox Opera 逻辑 逻辑主要包括三个部分。
li标签的position:absolute与relative案例应用
12-13
今天在写一个购物车里面选择发货地址的部分时，多个收货地址用到了UL标签，由于每个地址的后面有个“修改地址”的功能，而且位于li标签的右边，于是就用到了，position：absolute； right：10px；这样把“修改地址”移到右边去了，不过在此之前需要在li标签添加position：relative才行。html如下： 复制代码代码如下: <ul class=”addr_list”> <li class=”on”><span>寄送至</span><input type=”radio” name=”addr” />廣東省中山市三鄉鎮鴉崗村興隆製衣廠rabbit（rabbit收）1356
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用CSS样式position:fixed水平滚动的方法
09-04
主要介绍了使用CSS样式position:fixed水平滚动的方法,需要的朋友可以参考下
position:sticky新特性
EmotionComputer
08-08 1456
一、Chrome杀了个回马枪 position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，Chrome什么时候杀了个回马枪，居然又支持了。眼瞅着，各个浏览器纷纷立了山头，要必要关心关心position:sticky了，不要被人留下厚此薄彼的口舌。 Safari目前还需要-webkit-私有前缀。 二、position:sticky简介 单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，
详解css粘性定位position：sticky问题采坑
12-14
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position: sticky; top: 100px; } 设置position:sticky同时给一个(top,bottom,right,left)之一即可 使用条件： 1、父元素不能overflow:hidd
使用 position:sticky 实现粘性布局
weixin_34143774的博客
02-15 1206
如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这 3 个取值： { /* 全局值 */ p...
position:sticky用法
weixin_30846599的博客
02-18 758
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见，比如，侧边栏的部分区域。position:sticky为此而生。 position:sticky用法 position:sticky是一个新的css3属性，它的表现类似position:rel...
css position:sticky
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
10-22 497
position 是 CSS中的一个常用属性，常见的取值有：relative，absolute，static，fixed，不过我还有一个取值想必很多同学都没听过，那就是sticky，这个定位是干啥用的呢？ 我们经常会遇到的一个场景就是，网页左侧有一个重要区域，正常情况下是跟随网页滚动条滚动的，当该元素到达浏览器顶部时，元素的定位就变成了fixed不动了。 对于这种需求的解决方案通常借助JS和C...
实现table左边固定，右侧滚动 --position:sticky属性在ios真机不生效
weixin_45121510的博客
04-21 1511
<template> <div class="widget-table can-not-copy" > <div :class="{ letScroll: fixed }" ref="tableBox"> <table :key="keyCode" cellpadding="5" id="widget-table" width="100%" :border=.
跨浏览器的实践:position:fixed 层的固定定位
10-30
一般要固定某个div,我们都会让该div{position:fixed},它的下一个div{position:absolute}看了几个国外的关于CSS的固定定位跨浏览解决方案.他们却反其道而为之
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
基于vue的表格，实现基础的固定的表头，固定左侧列
cscscssjsp的博客
04-10 4228
先有主表格，在主表格基础上通过css样式控制实现效果，目前只能固定最左侧一列，或者从左侧开始多列 没有实现右侧固定，懒得做，固定的列填入fiexd,目前需要同时在表头和表体传入，最好是上下相同，以后再优化只在表头传值， 共三个表格，以下代码为源码，复用时请注明出处 1、html代码 <template> <div class="table_box" :style="...
固定表头和左侧列的表格插件DataTable
weixin_33743880的博客
04-27 1149
2019独角兽企业重金招聘Python工程师标准>>> ...
前端页面Table CSS实现固定表头表首行和固定列拖动固定
小熊猫
05-11 2880
sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置。要注意的是当position : sticky应用于table，只能作用于和，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。
css实现table表头和列固定功能
最新发布
sumimg的博客
12-15 507
项目需要用表格展示数据，要求表头和左边两列能够在滚动的时候固定，考虑到目前开源的table组件库冗余了太多项目不需要的功能，其次也是为了防止数据过多的时候渲染太慢，于是决定用html和css实现。根据MDN的描述，table-layout用于定义了用于布局表格单元格，行和列的算法，fixed属性值用于表示某一列的宽度仅由该列首行的单元格决定。属性，设置第一行和左右两列粘性定位，其中第二列的偏移量根据第一列的宽度决定，以此类推，如果有三列固定，需要知道前两列的宽度。高度要自适应（table默认支持）
table用position: sticky固定多层表头，滑动滚动条border边框透明解决方法
m0_54281425的博客
04-28 5012
**问题：**我们发现，只要设置了border边框，这个位置滑动有内容经过就会出现如图的情况。 **解决的方法：**用outline（轮廓）替代border,以达到我们想要的样式。 table thead tr { border: none; outline-color: #fff; outline-style: solid; outline-width: 1px; } outline主要是在元素边框的外围设置轮廓，outline不占据空间，绘制于元素内容周围。同时.
纯css position:sticky 实现表格首行和首列固定
jinse29的博客
12-21 1496
目录 1.认识position:sticky 2.position:sticky小栗子-实现表格首行和首列固定 2.1 效果图 2.2 代码 1.认识position:sticky 我们先来了解一个css属性，position:sticky，粘性布局，粘性布局，下面是MDN的介绍 课代表划重点：粘性布局是relation和fixed的结合，必须与top、right、bottom、left的任一属性配合使用才可以。 看到这里。感觉功能很强大吧，巴特，然后浏览器的兼容性不是很好。不过..
div中文字不换行(textarea中输入的文字，输出到div中文字不换自动换行的问题)
草木红的博客
01-09 4618
在文本域中输入文件，并点击回车开始下一行，点击按钮将信息输出到div中 <textarea name="" id="content" cols="30" rows="10"></textarea> <div id="info"></div> <button id="btn">按钮</button> <script src="./js/jquery.min.js"></script> <script>
position: sticky 表格 固定两列不滚动
07-28
要在表格中固定两列并使其不滚动，您可以使用position: sticky属性和一些CSS样式。以下是一个示例： HTML结构示例： ```html <div class="table-container"> <table> <thead> <tr> <th>固定列1</th> <th>固定列2</th> <th>其他列1</th> <th>其他列2</th> <!-- 其他表头列 --> </tr> </thead> <tbody> <!-- 表格内容行 --> </tbody> </table> </div> ``` CSS样式示例： ```css .table-container { width: 100%; overflow-x: auto; } table { width: max-content; table-layout: fixed; } th:first-child, td:first-child { position: sticky; left: 0; background-color: white; } th:nth-child(2), td:nth-child(2) { position: sticky; left: 100px; /* 调整固定列的宽度 */ background-color: white; } ``` 首先，将表格放在一个包含overflow-x: auto样式的容器中，这样当内容超出容器宽度时，可以出现水平滚动条。 然后，使用position: sticky和left属性来将第一列和第二列固定在左侧。您可以通过调整left值来控制固定列的宽度。 注意：这种方法在大多数现代浏览器中都能正常工作，但在某些旧版本的浏览器中可能不起作用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值