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 表体滚动， 表头、表尾固定
在开发报表中，如果报表数据行过多页面无法全部显示，或者内容溢出div，需要把表头和表尾固定表体滚动这样就可以在页面上全部显示，并且不会溢出div 效果：最终实现效果 代码：<!DOCTYPE html> <html&g…...
第57篇-某钩招聘网站加密参数分析【2023-10-31】
声明：该专栏涉及的所有案例均为学习使用，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！如有侵权，请私信联系本人删帖！ 文章目录 一、前言二、网站分析1.X-S-HEADER参数2.请求参数data3.响应机密值data一、前言 网址： aHR0cHM6Ly93d3cubGFnb3UuY29t…...
C语言数据结构之数据结构入门
目录 数据结构介绍 数据结构发展史 何为算法 数据结构基础 基本概念和术语 四大逻辑结构（Logic Structure） 数据类型 理解复杂度概念 时间空间复杂度定义 度量时间复杂度的方法 程序运行时的内存与地址 编程预备 数据结构介绍 数据结构发展…...
如何知道服务器的某个端口是否打开
1、telnet 命令：telnet ip port，port即端口，我们一般最常见的命令就是telnet，但是telnet使用的是tcp协议，换句话说telnet只能检测tcp的这个端口打开了没 若是端口打开，会出现下列信息 失败的是这个 如…...
【ICCV‘23】One-shot Implicit Animatable Avatars with Model-based Priors
文章目录 前置知识 前置知识 1）SMPL模型 \quad SMPL这类方法只建模穿很少衣服的人体（裸体模型），它只能刻画裸体角色的动画，并不能刻画穿衣服的人体的动画 2）data-efficient \quad 这个词推荐用ÿ…...
关于息肉检测和识别项目的总结
前言 整体的思路：首先息肉数据集分为三类： 1.正常细胞 2. 增生性息肉 3. 肿瘤要想完成这个任务，首先重中之重是分割任务，分割结果的好坏， 当分割结果达到一定的准确度后，开始对分割后的结果进行下游分类…...
Jetson Xavier NX FFmpeg支持硬件编解码
最近在用Jetson Xavier NX板子做视频处理，但是CPU进行视频编解码，效率比较地下。 于是便考虑用硬解码来对视频进行处理。 通过jtop查看，发现板子是支持 NVENC硬件编解码的。 1、下载源码 因为需要对ffmpeg进行打补丁修改，因此需要编译两份源码 1.1、编译jetson-ffmpeg …...
518抽奖软件，为什么说比别的抽奖软件更美观精美？
518抽奖软件简介 518抽奖软件，518我要发，超好用的年会抽奖软件，简约设计风格。 包含文字号码抽奖、照片抽奖两种模式，支持姓名抽奖、号码抽奖、数字抽奖、照片抽奖。(www.518cj.net) 精致美观功能 字体平滑无锯齿图片放大后清晰…...
React的组件学习
React的组件学习 参考资料：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岁作家的离世引发关注，有这些情况的请注意
近期，90后网络小说家七月新番和26岁男艺人蒋某某因肺癌去世，引发关注。他们都没有吸烟习惯，那么他们为什么会得肺癌呢？浙大二院呼吸内科副主任医师兰芬说，现在年轻人熬夜、加班导致身体过劳，在劳累情况下身…...
【兔子王赠书第4期】用ChatGPT轻松玩转机器学习与深度学习
文章目录 前言机器学习深度学习ChatGPT推荐图书粉丝福利尾声 前言 兔子王免费赠书第4期来啦，突破传统学习束缚，借助ChatGPT的神奇力量，解锁AI无限可能！ 机器学习 机器学习是人工智能领域的一个重要分支，它的目的是让…...
Ubuntu18.04 ROS Melodic的cv_bridge指向问题（四种方式，包括opencv4）（转载）
转载自： 【精选】Ubuntu18.04 ROS Melodic的cv_bridge指向问题（四种方式，包括opencv4）_XiangrongZ的博客-CSDN博客...
Android任务栈和启动模式
Andrcid中的任务栈是一种用来存放Activity实倒的容器。任务最大的特点就是先进后出，它主要有两个基本操作，分别是压栈和出栈。通常Andaid应用程序都有一个任务栈，每打开一个Activity时，该Activity就会被压入任务栈。每销毁一个Act…...
电脑加密软件哪个好？电脑加密软件推荐
电脑是我们办公离不开的工具，而为了保护电脑数据安全，我们可以使用专业的电脑加密软件来进行加密保护。那么，电脑加密软件哪个好呢？下面我们就来了解一下。 文件加密——超级加密3000 想要安全加密电脑重要文件，我们可…...
如何优雅地单元测试 Kotlin/Java 中的 private 方法？
翻译自 https://medium.com/mindorks/how-to-unit-test-private-methods-in-java-and-kotlin-d3cae49dccd ❓如何单元测试 Kotlin/Java 中的 private 方法❓ 首先，开发者应该测试代码里的 private 私有方法吗？ 直接信任这些私有方法，测试到…...
单元测试，集成测试，系统测试的区别是什么？
实际的测试工作当中，我们会从不同的角度对软件测试的活动进行分类，题主说的“单元测试，集成测试，系统测试”，是按照开发阶段进行测试活动的划分。这种划分完整的分类，其实是分为四种“单元测试，…...
数据结构（超详细讲解！！）第十八节 串（KMP算法）
1.BF算法 算法在字符比较不相等，需要回溯（即ii-j1）：即退到s中的下一个字符开始进行继续匹配。 最好情况下的时间复杂度为O(m)。 最坏情况下的时间复杂度为O(nm)。 平均的时间复杂度为O(nm)。 2.KMP算法 KMP算法是D.E.Knuth、…...
软考_软件设计师
算法： 1、直接插入排序 详解：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资源异常时，系统产生此告警。 当Manager中的Ldap资源恢复，且告警处理完成时，告警恢复。 告警属性 告警参数 对系统的影响 Ldap资源异常，Manager和组件WebUI认证服务不可用，无法对Web上层…...
AIGC 检测‘句长标准差‘到底是什么？嘎嘎降 AI 帮你 AI 率从 70% 降到 7%
AIGC 检测"句长标准差"到底是什么？嘎嘎降 AI 帮你 AI 率从 70% 降到 7% AIGC 检测算法 4.0 版本看的 5 项底层指标里——句长标准差权重最高（约 35%）。理解了这一项你就知道为什么手改一周降不下 AI 率。这篇文章把"句长标准差…...
树莓派命令行保姆级避坑指南：从sudo权限到安全关机，别再乱敲命令了
树莓派命令行深度避坑手册：从权限管理到系统维护的黄金法则 当你第一次拿到树莓派时，那种兴奋感可能让你迫不及待地想尝试各种命令。但很快，你会发现这个小小的设备背后隐藏着许多"陷阱"——一个错误的sudo命令可能导致系统崩溃&am…...
手把手教你为100ASK T113-S3核心板点亮SPI屏：设备树配置、内核编译到fb-test测试
手把手教你为100ASK T113-S3核心板点亮SPI屏：设备树配置、内核编译到fb-test测试 在嵌入式Linux开发中，驱动一块SPI接口的LCD屏幕是常见的硬件交互项目。本文将基于全志T113-S3平台和100ASK核心板，详细讲解如何从零开始驱动ILI9341 SPI屏幕。…...
对比直接使用厂商API体验Taotoken聚合调用在延迟上的优化感受
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 对比直接使用厂商API体验Taotoken聚合调用在延迟上的优化感受 作为一名长期直接调用单一模型API的开发者，我的日常工作…...
二维码识读设备选购全攻略：从核心需求到实战测试
1. 项目概述：为什么选对二维码识读设备这么重要？你可能觉得，不就是扫个码吗？手机摄像头都能搞定，专门的设备能有多大区别？我刚开始接触这个领域时也是这么想的，直到自己踩过几次坑，才…...
智能车视觉巡线：从图像处理到PID控制的嵌入式实战解析
1. 项目概述：一场关于速度与精度的极限挑战十多年前，当飞思卡尔（Freescale）智能车竞赛还是校园里最硬核的科技赛事之一时，摄像头组的较量无疑是皇冠上的明珠。它不像光电组依赖地面反射，也不像电磁组追寻导…...
告别时序噩梦：Vivado的report_qor_suggestions从导出RQS到导入生效全流程避坑指南
告别时序噩梦：Vivado的report_qor_suggestions从导出RQS到导入生效全流程避坑指南 在FPGA设计流程中，时序收敛问题往往成为工程师的"最后一公里"难题。当设计复杂度达到一定规模时，传统的手动优化方式不仅效率低下，还可…...
如何为FF14国际服实现完整中文汉化：FFXIVChnTextPatch实战指南
如何为FF14国际服实现完整中文汉化：FFXIVChnTextPatch实战指南 【免费下载链接】FFXIVChnTextPatch 项目地址: https://gitcode.com/gh_mirrors/ff/FFXIVChnTextPatch 还在为《最终幻想14》国际服的英文界面而烦恼吗？FFXIVChnTextPatch项目为你提…...
从‘硬连接’到‘软融合’：拆解U-Net++中那些被重新设计的跳跃连接（Skip Connections）
从‘硬连接’到‘软融合’：拆解U-Net中那些被重新设计的跳跃连接 在医学图像分割领域，U-Net架构因其对称的编码器-解码器结构和跳跃连接设计，成为众多研究的基础框架。然而，当我们面对脑肿瘤、肺结节等尺寸差异显著的病灶时&#…...
从地图导航到网络路由：深入理解Floyd-Warshall算法的动态规划内核与空间优化技巧
从地图导航到网络路由：深入理解Floyd-Warshall算法的动态规划内核与空间优化技巧 当我们使用地图导航寻找两点间最快路线时，或在数据中心配置网络路由协议时，背后可能都在运行一个经典的图论算法——Floyd-Warshall。这个诞生于1962年的算法以…...