首页 > 其他分享 >table 实现固定行和固定列

table 实现固定行和固定列

时间:2023-06-20 11:25:19浏览次数:43  
标签:固定 实现 sticky th position table fixed

需要用到的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>

 

标签:固定,实现,sticky,th,position,table,fixed
From: https://www.cnblogs.com/chenzxl/p/17493095.html

相关文章

  • 基于C语言的一维小波变换处理算法使用C语言实现的小波变换一维信号处理算法,以下是使用
    基于C语言的一维小波变换处理算法使用C语言实现的小波变换一维信号处理算法,以下是使用MATLAB和C语言算法的处理结果对比图。还可以提供说明文档对程序进行说明。涉及到的知识点和领域范围是信号处理和编程语言。小波变换是一种信号处理技术,用于分析和处理信号的频率和时间特性。C......
  • 三菱FX3U-485ADP-MB通讯三种变频器程序 已实现测试的变频器:施耐德ATV312,
    三菱FX3U-485ADP-MB通讯三种变频器程序已实现测试的变频器:施耐德ATV312,三菱E700,台达VFD-M三款变频器,支持rtu的协议的变频器都可实现。需要硬件:FX3UPLC,FX3U-485ADP-MB通信扩展模块,施耐德ATV312变频器或台达vfd-m变频器或三菱E700变频器,fx3u-cnv-bd。通过modbusrtu通讯方式,可......
  • 正态分布降噪(c语言实现)
    一、原理:正态分布降噪的原理为正态分布图,当一个数出现的概率小于0.3%时,便认为其是异常值,并将其去除。二、思路:1.从txt文件中读入数据并将其的值赋值给a数组,并赋值a数组的值给b数组;2.再新建一个d数组其中存放每个值出现的频率,若重复出现,则其后重复的值全部赋值为0;3.输出时用d数......
  • 最少硬币问题(c语言实现)
    1.1题目算法实现题3-2最少硬币问题★问题描述:设有n种不同面值的硬币,各硬币的面值存于数组T[1:n]中,现要用这些面值的硬币来找钱。可以使用的各种面值的硬币个数存于数组Coins[l:n]中。对任意钱数0≤m≤20001,设计一个用最少硬币找钱m的方法。★算法设计:对于给定的1≤n≤1......
  • 数列极差问题(c语言实现)
    4.1题目算法实现题4-13数列极差问题★问题描述:在黑板上写了N个正数组成的一个数列,进行如下操作:每一次擦去其中2个数,设为a和b,然后在数列中加入一个数ab+1,如此下去直至黑板上只剩下一个数。在所有按这种操作方式最后得到的数中,最大的数记为max,最小的数记为min,则该数列的极差M定义......
  • 实现高词频的统计以及文件的操作(python_jieba分词)
    Requestsjieba分词应用:使用jieba分词对一个文本进行分词,将分词结果保存于文件“fc.txt”中,注意结果只保存有效词语,单字不保存。并统计在文章中出现次数最多的前五个词语(一个字的不算词语)。(问题来源:旺财的python作业)Text董卓进京后,废立皇帝,残害百姓,荒淫暴虐,激起群臣共愤。一日,......
  • 数据结构代码整理_基于邻接表存储结构的有向图的实现(C++)
    目录RequirementsDebuggingEnvironmentChatCode1.graph.h2.test.cppRequirements       基于邻接表存储结构实现有向图的典型操作(构造、析构、增加顶点、删除顶点、增加弧、删除弧,查找一个顶点、判空、判满、图中顶点个数、邻接表中指定顶点的第一个邻接顶点、深度优先......
  • 关于线性结构中的双向链表如何实现?
    前言在上一篇文章中,主要是给大家介绍了单向链表的特点及其原理,但是我们没有通过代码进行练习。今天我会继续通过一篇文章,来给大家讲解双向链表的内容,尤其是会通过代码来进行链表的操作,希望大家重点关注哦。全文大约【3500】字,不说废话,只讲可以让你学到技术、明白原理的纯干货!......
  • 每日一个 ChatGPT 使用小技巧系列之2 - 用 ChatGPT 研读 SAP ABAP BAPI 的实现源代码
    本系列之前的文章:与其整天担心AI会取代程序员,不如先让AI帮助自己变得更强大每日一个ChatGPT使用小技巧系列之1-给出提纲或者素材,让ChatGPT帮你写作正好昨天有朋友向我发起知乎咨询,询问关于SAPABAPBAPIbapi_vendor_create的使用问题,本文就来说一说:bapi_......
  • lettuce+redisTemplate实现redis单击和集群的整合
    lettuce+redisTemplate实现redis单击和集群的整合Springboot整合redis是非常方便的,大致包含如下四部分pomstart相关jar的引入properties/yaml基础配置信息configbean的initbean的注入及使用如果遇到网上的自动装配的实例直接跳过吧,哪怕再小的公司,密码也会加密处理......