需要用到的2个属性

table-layout : fixed

position : sticky

table-layout

table-layout属性有两种特定值：

  1. auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值
  2. fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义

为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。

table {

 table-layout: fixed;

 width: 100%;

}

Position

大家对position 的作用应该不陌生，而固定表格则需要使用到 position : sticky 的设定

sticky 的表现类似于relative 和fixed 的合体，在目标区域中可见时，他的行为就像relative 不会有任何变化，而当页面滚动超出目标区域时，他的表现改为fixed会固定于目标位置

要注意的是当position : sticky应用于table，只能作用于<th>和<td>，并且一定要定义目标位置 left / right / top / bottom 才会出现固定效果！

thead tr th {

 position:sticky;

 top:0;

}

实例如下

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>纯CSS实现表格首行和首列固定</title>

    <!-- 插入Vue -->

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        .main{

            width: 500px;

            overflow:auto;

            height:208px;  /* 设置固定高度 */

        }

        td, th {

            /* 设置td,th宽度高度 */

            border:1px solid gray;

            width:100px;

            height:30px;

        }

        th {

            background-color:lightblue;

        }

        table {

            table-layout: fixed;

            width: 200px; /* 固定宽度 */

        }

        td:first-child, th:first-child {

            position:sticky;

            left:0; /* 首行永远固定在左侧 */

            z-index:1;

            background-color:lightpink;

        }

        thead tr th {

            position:sticky;

            top:0; /* 列首永远固定在头部  */

        }

        th:first-child{

            z-index:2;

            background-color:lightblue;

        }

    </style>

</head>

<body>

<div id="app">

    <div class="main">

        <table  cellspacing="0" >

            <thead>

            <tr>

                <th> </th>

                <th> </th>

                <th> </th>

                <th> </th>

                <th> </th>

                <th> </th>

                <th> </th>

                <th> </th>

                <th> </th>

            </tr>

            </thead>

            <tbody>

            <tr v-for="(item, index) in 30" :key="index">

                <td> </td>

                <td> </td>

                <td> </td>

                <td> </td>

                <td> </td>

                <td> </td>

                <td> </td>

                <td> </td>

                <td> </td>

            </tr>

            </tbody>

        </table>

    </div>

</div>

</body>

<script>

    var app = new Vue({

        el: '#app',

        data: {

            message: 'Hello'

        },

    })

</script>

</html>

Table 实现固定行和固定列的更多相关文章

  1. 锁定TABLE的首行和首列

    1. 2. 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  3. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

  4. table固定前两列和最后一列，其他滑动显示

    网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个table的,此示例只固定了前两列和最后一列,和网上的不太一样. 网上搜的基本都是4个table做的,数据处理比较麻烦,写了个一个tab ...

  5. bootstrap table 怎么实现前两列固定冻结？

    $("#Table").bootstrapTable('destroy').bootstrapTable({ pagination: true,//分页 minimumCountC ...

  6. vue表格实现固定表头首列

    前言 最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...

  7. bootstrap-table固定表头固定列

    1.引入 bootstrap依赖于jquery bootstrap-table依赖于bootstrap,所以都需要引入 2. bootstrap-table有两种方式,html.js <tabl ...

  8. table头部、尾部固定;中间内容定高自适应滚动

    table头部.尾部固定;中间内容定高自适应滚动 很多时候,需要使用到表格做数据分析,不管是前端展现,还是后台管理系统节点展现 工作过程中遇到了,作为一个小笔记,备忘! 如下图所示 --------- ...

  9. jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...

  10. 在Telegraf上报的监控数据中添加固定的标签列

    Telegraf作为InfluxData提供的TICK工具栈(由Telegraf, InfluxDB, Chronograf, Kapacitor四个工具的首字母组成)中收集监控数据的一环,功能非常强 ...

随机推荐

  1. 【已解决】hive导出mysql报错：Container [pid=3962,containerID=container_1632883011739_0002_01_000002] is running 270113280B beyond the 'VIRTUAL' memory limit.

    问题描述 Container [pid=3962,containerID=container_1632883011739_0002_01_000002] is running 270113280B b ...

  2. #斜率优化，单调栈#洛谷 5504 [JSOI2011] 柠檬

    题目 分析 设\(dp[i]\)表示前\(i\)个贝壳可以获得的最大收益, 则\(dp[i]=\max\{dp[j-1]+S(c[i]-c[j]+1)^2\}[s_i==s_j]\) 可以发现当且仅当 ...

  3. 【FAQ】运动健康服务云侧数据常见问题及解答

    目录 Q1:v2接口相比于v1接口传参及返回的数据格式有变化吗?是否可以直接将v1接口改成v2接口? Q2:如何获取采集健康数据的穿戴设备信息? Q3:如何处理非华为手机产生的步数调用采样明细接口查询 ...

  4. VS Qt扩展插件下载地址

    使用vs开发qt项目,需要安装qt插件 QT插件下载地址:https://mirrors.ustc.edu.cn/qtproject/official_releases/vsaddin/

  5. Godot.NET C#IOC重构(2):TileMap 详解

    目录 前言 TileMap添加 TileMap绘制 TileMap 连续图块 修改纹理原点 统一设置 自动地形 匹配规则 修改匹配概率 修改概率前 修改概率后 随机图块 Scattering 不连续间 ...

  6. AI数字人直播优势凸显,那么该如何打造AI数字人直播间?

    近年来,我们听到了很多无人直播间,数字人直播间这些名词,很多人会好奇这到底是什么意思,没人还可以直播吗?那什么是AI数字人直播? AI数字人是用真人拍摄五分钟高清视频上传到青否数字人克隆端,生成的数字 ...

  7. mysql 重新整理——逻辑架构[二]

    前言 在此简洁逻辑架构,mysql的基础逻辑架构其实和sql server很像的. 正文 首先是客户端,发起了连接. 然后呢连接池后那一块,就是有分析器的那一块,那一块是干啥的呢. 其实我们写的语句呢 ...

  8. MAC上Cisco AnyConnect删除不干净,造成无法重新安装的解决办法

    1.问题 由于直接删除而不是正常卸载,导致文件残留,无法正常安装,并且软件不可用 2.解决 2.1 终端运行命令 pkgutil --pkgs|grep com.cisco 查看cisco残留的文件 ...

  9. Flink 最佳实践之使用 Canal 同步 MySQL 数据至 TiDB

    简介: 本文将介绍如何将 MySQL 中的数据,通过 Binlog + Canal 的形式导入到 Kafka 中,继而被 Flink 消费的案例. 一. 背景介绍 本文将介绍如何将 MySQL 中的数 ...

  10. EDA 事件驱动架构与 EventBridge 二三事

    ​简介: 事件驱动型架构 (EDA) 方兴未艾,作为一种 Serverless 化的应用概念对云原生架构具有着深远影响.当我们讨论到一个具体架构时,首当其冲的是它的发展是否具有技术先进性.这里从我们熟 ...