table表头固定只让内容滚动
创始人
2024-05-30 12:31:53
0

table表头固定只让内容滚动

纯css实现表头固定,只tbody滚动 需要用到粘性固定属性 – position:sticky

  • position:sticky 用法:默认情况下,其表现为relative,在视窗与设置了该属性的元素之间,达到或超过其预设的 top、bottom、left、right,本属性会转变成 fixed,使 sticky 固定。

  • html结构:table外面需要包一层div

  •   
    序号名称电话备注录入时间
  • css是最关键的,需要分别对table自身和其父便签设置样式

  • // table父标签: 需要设置固定高度.table-box {height: 500px;overflow-y: auto;border: 1px solid #ddd;} 
    ​
    // table表格样式table {width: 100%;table-layout: fixed;thead th {position: sticky;top: -1px;z-index: 10;}}

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...