当前位置: 首页 > news >正文

table 表体滚动, 表头、表尾固定

在开发报表中,如果报表数据行过多页面无法全部显示,或者内容溢出div,需要把表头和表尾固定表体滚动这样就可以在页面上全部显示,并且不会溢出div

效果:

在这里插入图片描述
最终实现效果

在这里插入图片描述

代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title><style type="text/css">.table-container {height: 200px;overflow-y: auto;}table {width: 100%;table-layout: fixed;border-collapse: collapse;}thead {position: sticky;top: 0;background-color: #fff;}th, td {padding: 8px;border: 1px solid #ccc;}tfoot {position: sticky;bottom: 0;background-color: #fff;}</style>
</head><body><div class="table-container"><table><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr></thead><tbody><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><tr><td rowspan="2">合并单元格</td><td>内容1</td><td>内容2</td></tr><tr><td>内容3</td><td>内容4</td></tr><!-- 更多行... --></tbody><tfoot><tr><td>1</td><td>2</td><td>3</td></tr></tfoot></table></div></body>
</html>

相关文章:

table 表体滚动, 表头、表尾固定

在开发报表中&#xff0c;如果报表数据行过多页面无法全部显示&#xff0c;或者内容溢出div&#xff0c;需要把表头和表尾固定表体滚动这样就可以在页面上全部显示&#xff0c;并且不会溢出div 效果&#xff1a;最终实现效果 代码&#xff1a;<!DOCTYPE html> <html&g…...

第57篇-某钩招聘网站加密参数分析【2023-10-31】

声明:该专栏涉及的所有案例均为学习使用,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关!如有侵权,请私信联系本人删帖! 文章目录 一、前言二、网站分析1.X-S-HEADER参数2.请求参数data3.响应机密值data一、前言 网址: aHR0cHM6Ly93d3cubGFnb3UuY29t…...

C语言数据结构之数据结构入门

目录 数据结构介绍 数据结构发展史 何为算法 数据结构基础 基本概念和术语 四大逻辑结构&#xff08;Logic Structure&#xff09; 数据类型 理解复杂度概念 时间空间复杂度定义 度量时间复杂度的方法 程序运行时的内存与地址 编程预备 数据结构介绍 数据结构发展…...

如何知道服务器的某个端口是否打开

1、telnet 命令&#xff1a;telnet ip port&#xff0c;port即端口&#xff0c;我们一般最常见的命令就是telnet&#xff0c;但是telnet使用的是tcp协议&#xff0c;换句话说telnet只能检测tcp的这个端口打开了没 若是端口打开&#xff0c;会出现下列信息 失败的是这个 如…...

【ICCV‘23】One-shot Implicit Animatable Avatars with Model-based Priors

文章目录 前置知识 前置知识 1&#xff09;SMPL模型 \quad SMPL这类方法只建模穿很少衣服的人体&#xff08;裸体模型&#xff09;&#xff0c;它只能刻画裸体角色的动画&#xff0c;并不能刻画穿衣服的人体的动画 2&#xff09;data-efficient \quad 这个词推荐用&#xff…...

关于息肉检测和识别项目的总结

前言 整体的思路&#xff1a;首先息肉数据集分为三类&#xff1a; 1.正常细胞 2. 增生性息肉 3. 肿瘤要想完成这个任务&#xff0c;首先重中之重是分割任务&#xff0c;分割结果的好坏&#xff0c; 当分割结果达到一定的准确度后&#xff0c;开始对分割后的结果进行下游分类…...

Jetson Xavier NX FFmpeg支持硬件编解码

最近在用Jetson Xavier NX板子做视频处理,但是CPU进行视频编解码,效率比较地下。 于是便考虑用硬解码来对视频进行处理。 通过jtop查看,发现板子是支持 NVENC硬件编解码的。 1、下载源码 因为需要对ffmpeg进行打补丁修改,因此需要编译两份源码 1.1、编译jetson-ffmpeg …...

518抽奖软件,为什么说比别的抽奖软件更美观精美?

518抽奖软件简介 518抽奖软件&#xff0c;518我要发&#xff0c;超好用的年会抽奖软件&#xff0c;简约设计风格。 包含文字号码抽奖、照片抽奖两种模式&#xff0c;支持姓名抽奖、号码抽奖、数字抽奖、照片抽奖。(www.518cj.net) 精致美观功能 字体平滑无锯齿图片放大后清晰…...

React的组件学习

React的组件学习 参考资料&#xff1a;https://zh-hans.react.dev/learn/your-first-component 一、定义组件 export default function Profile() {return (<imgsrc"https://i.imgur.com/MK3eW3Am.jpg"alt"Katherine Johnson"/>) }以下是构建组件…...

uni-app配置微信开发者工具

一、配置微信开发者工具路径 工具->设置->运行配置->小程序运行配置->微信开发者工具路径 二、微信开发者工具开启服务端口...

肺癌不再是老年病:33岁作家的离世引发关注,有这些情况的请注意

近期&#xff0c;90后网络小说家七月新番和26岁男艺人蒋某某因肺癌去世&#xff0c;引发关注。他们都没有吸烟习惯&#xff0c;那么他们为什么会得肺癌呢&#xff1f;浙大二院呼吸内科副主任医师兰芬说&#xff0c;现在年轻人熬夜、加班导致身体过劳&#xff0c;在劳累情况下身…...

【兔子王赠书第4期】用ChatGPT轻松玩转机器学习与深度学习

文章目录 前言机器学习深度学习ChatGPT推荐图书粉丝福利尾声 前言 兔子王免费赠书第4期来啦&#xff0c;突破传统学习束缚&#xff0c;借助ChatGPT的神奇力量&#xff0c;解锁AI无限可能&#xff01; 机器学习 机器学习是人工智能领域的一个重要分支&#xff0c;它的目的是让…...

Ubuntu18.04 ROS Melodic的cv_bridge指向问题(四种方式,包括opencv4)(转载)

转载自&#xff1a; 【精选】Ubuntu18.04 ROS Melodic的cv_bridge指向问题&#xff08;四种方式&#xff0c;包括opencv4&#xff09;_XiangrongZ的博客-CSDN博客...

Android任务栈和启动模式

Andrcid中的任务栈是一种用来存放Activity实倒的容器。任务最大的特点就是先进后出&#xff0c;它主要有两个基本操作&#xff0c;分别是压栈和出栈。通常Andaid应用程序都有一个任务栈&#xff0c;每打开一个Activity时&#xff0c;该Activity就会被压入任务栈。每销毁一个Act…...

电脑加密软件哪个好?电脑加密软件推荐

电脑是我们办公离不开的工具&#xff0c;而为了保护电脑数据安全&#xff0c;我们可以使用专业的电脑加密软件来进行加密保护。那么&#xff0c;电脑加密软件哪个好呢&#xff1f;下面我们就来了解一下。 文件加密——超级加密3000 想要安全加密电脑重要文件&#xff0c;我们可…...

如何优雅地单元测试 Kotlin/Java 中的 private 方法?

翻译自 https://medium.com/mindorks/how-to-unit-test-private-methods-in-java-and-kotlin-d3cae49dccd ❓如何单元测试 Kotlin/Java 中的 private 方法❓ 首先&#xff0c;开发者应该测试代码里的 private 私有方法吗&#xff1f; 直接信任这些私有方法&#xff0c;测试到…...

单元测试,集成测试,系统测试的区别是什么?

实际的测试工作当中&#xff0c;我们会从不同的角度对软件测试的活动进行分类&#xff0c;题主说的“单元测试&#xff0c;集成测试&#xff0c;系统测试”&#xff0c;是按照开发阶段进行测试活动的划分。这种划分完整的分类&#xff0c;其实是分为四种“单元测试&#xff0c;…...

数据结构(超详细讲解!!)第十八节 串(KMP算法)

1.BF算法 算法在字符比较不相等&#xff0c;需要回溯&#xff08;即ii-j1&#xff09;&#xff1a;即退到s中的下一个字符开始进行继续匹配。 最好情况下的时间复杂度为O(m)。 最坏情况下的时间复杂度为O(nm)。 平均的时间复杂度为O(nm)。 2.KMP算法 KMP算法是D.E.Knuth、…...

软考_软件设计师

算法&#xff1a; 1、直接插入排序 详解&#xff1a;https://blog.csdn.net/qq_44616044/article/details/115708056 void insertSort(int data[],int n){int i,j,temp;for(i1;i<n;i){if(data[i]<data[i-1]){temp data[i];data[i] data[i-1];for(ji-1;j>0&&am…...

大数据之LibrA数据库系统告警处理(ALM-12004 OLdap资源异常)

告警解释 当Manager中的Ldap资源异常时&#xff0c;系统产生此告警。 当Manager中的Ldap资源恢复&#xff0c;且告警处理完成时&#xff0c;告警恢复。 告警属性 告警参数 对系统的影响 Ldap资源异常&#xff0c;Manager和组件WebUI认证服务不可用&#xff0c;无法对Web上层…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...