html 怎么置顶表格,表格(Table)表头固定,内容上滚【5个实例】
当表格往上滚动的时候,表头固定不动,这样可以让用户时刻看清每一列的数据含义,这是人性化的设计,充分考虑了用户使用体验。本文将通过5个实例,来介绍这种表格设计。用户可通过下载源码,直接应用于自己的项目里。
Table表格往上滚,表头固定不动
实例1
实例1:Table表格往上滚,表头固定不动
html代码html>
Table V01
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
html {
height: 100%;
font-family: sans-serif;
}
/*==================================================================
[ 表格宽度 ]*/
.limiter {
width: 60%;
margin: 0 auto;
}
/*---------------------------------------------*/
.container-table100 {
width: 100%;
min-height: 100vh;
background: #fff;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 33px 30px;
}
.wrap-table100 {
width: 100%;
}
.table100 {
background-color: #fff;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: left;
font-weight: bold;
padding-right: 10px;
}
td {
font-weight: unset;
padding-right: 10px;
}
/*==================================================================
[ 单元格宽度 ]*/
.column1 {
width: 33%;
padding-left: 40px;
}
.column2 {
width: 13%;
}
.column3 {
width: 22%;
}
.column4 {
width: 19%;
}
.column5 {
width: 13%;
}
/*---------------------------------------------*/
.table100-head th {
padding-top: 18px;
padding-bottom: 18px;
}
.table100-body td {
padding-top: 16px;
padding-bottom: 16px;
}
/*==================================================================
[ Fix header ]*/
.table100 {
position: relative;
padding-top: 60px;
}
.table100-head {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.table100-body {
max-height: 585px;
overflow: auto;
}
/*==================================================================
[ Ver1 ]*/
.table100.ver1 th {
font-family: Lato-Bold;
font-size: 18px;
color: #fff;
line-height: 1.4;
background-color: #6c7ae0;
}
.table100.ver1 td {
font-family: Lato-Regular;
font-size: 15px;
color: #808080;
line-height: 1.4;
}
.table100.ver1 .table100-body tr:nth-child(even) {
background-color: #f8f6ff;
}
/*---------------------------------------------*/
/* 表格盒子样式 */
.table100.ver1 {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0 0px 40px 0px rgba(0, 0, 0, 0.15);
}
.table100.ver1 .ps__rail-y {
right: 5px;
}
.table100.ver1 .ps__rail-y::before {
background-color: #ebebeb;
}
.table100.ver1 .ps__rail-y .ps__thumb-y::before {
background-color: #cccccc;
}
/*---------------------------------------------*/
Class nameTypeHoursTrainerSpots
Like a butterfly | Boxing | 9:00 AM - 11:00 AM | Aaron Chapman | 10 |
Mind & Body | Yoga | 8:00 AM - 9:00 AM | Adam Stewart | 15 |
Crit Cardio | Gym | 9:00 AM - 10:00 AM | Aaron Chapman | 10 |
Wheel Pose Full Posture | Yoga | 7:00 AM - 8:30 AM | Donna Wilson | 15 |
Playful Dancer's Flow | Yoga | 8:00 AM - 9:00 AM | Donna Wilson | 10 |
Zumba Dance | Dance | 5:00 PM - 7:00 PM | Donna Wilson | 20 |
Cardio Blast | Gym | 5:00 PM - 7:00 PM | Randy Porter | 10 |
Pilates Reformer | Gym | 8:00 AM - 9:00 AM | Randy Porter | 10 |
Supple Spine and Shoulders | Yoga | 6:30 AM - 8:00 AM | Randy Porter | 15 |
Yoga for Divas | Yoga | 9:00 AM - 11:00 AM | Donna Wilson | 20 |
Virtual Cycle | Gym | 8:00 AM - 9:00 AM | Randy Porter | 20 |
Like a butterfly | Boxing | 9:00 AM - 11:00 AM | Aaron Chapman | 10 |
Mind & Body | Yoga | 8:00 AM - 9:00 AM | Adam Stewart | 15 |
Crit Cardio | Gym | 9:00 AM - 10:00 AM | Aaron Chapman | 10 |
Wheel Pose Full Posture | Yoga | 7:00 AM - 8:30 AM | Donna Wilson | 15 |
Playful Dancer's Flow | Yoga | 8:00 AM - 9:00 AM | Donna Wilson | 10 |
Zumba Dance | Dance | 5:00 PM - 7:00 PM | Donna Wilson | 20 |
Cardio Blast | Gym | 5:00 PM - 7:00 PM | Randy Porter | 10 |
Pilates Reformer | Gym | 8:00 AM - 9:00 AM | Randy Porter | 10 |
Supple Spine and Shoulders | Yoga | 6:30 AM - 8:00 AM | Randy Porter | 15 |
Yoga for Divas | Yoga | 9:00 AM - 11:00 AM | Donna Wilson | 20 |
Virtual Cycle | Gym | 8:00 AM - 9:00 AM | Randy Porter | 20 |
实例2
实例2:Table表格往上滚,表头固定不动
实例3
实例3:Table表格往上滚,表头固定不动
实例4
实例4:Table表格往上滚,表头固定不动
实例5
实例5:Table表格往上滚,表头固定不动
html 怎么置顶表格,表格(Table)表头固定,内容上滚【5个实例】相关推荐
- table表头和首列的表格固定-JQuery、js实现的Table表头固定
这个是最简单的方法,基于jQuery的解决方案,引入一个两个js就可以解决,当然也有使用css, position: sticky,这个我下一章节会讲它的优缺点,当然为了凸显jQuery的优点, 我就 ...
- div+css实现表头固定内容滚动表格
<div class="m-demo"><table><thead><tr><th>定宽a</th>< ...
- layui表头宽度和表格一致_layui表格如何把表头固定
layui表格如何把表头固定 发布时间:2020-09-21 09:58:37 来源:亿速云 阅读:126 作者:小新 小编给大家分享一下layui表格如何把表头固定,希望大家阅读完这篇文章后大所收获 ...
- HTML table表头固定
实现表格表头的固定,采用纯css的方式 具体如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="C ...
- table表头固定,底部可滚动
需求:实现table表头固定,表体可滚动 思路: tbody使用display:block,固定高度,并设置over-y:scroll, thead和tr,使用display:table,使用tabl ...
- table 表头固定
一.table 表头固定说明.我们将表头和表内容分成两个表格就可以解决该问题. 二.代码. css代码:里面定死的宽高只是为啦方便看效果,实际中需要使用js计算出来. * {box-sizing: b ...
- html table表头说明,HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: table tbody { display: block; height: 200px; overflo ...
- html5手机表头设置,html Table 表头固定的实现
本文介绍了html table 表头固定的实现,分享给大家,具体如下: 合同号签约客户发布客户合同状态选定条件的发布周期额度 看看css *{ padding:0; margin:0; } th{ b ...
- bootstrap table 表头与内容不对齐问题解决
bootstrap table 表头与内容不对齐问题解决 参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...
- JQuery实现的Table表头固定展示效果
在线演示1 在线演示2 在线演示3 本地下载 大家可能经常需要展示数据或者报表,表头如果滚动上去后,查看数据的类别和字段是个麻烦事情,在这里我们推荐来自tympanus的一个JS实现的 table表头 ...
最新文章
- 【Elastic Stack(一)】Elastic Stack简介
- c语言程序设计基础程序改错,c程序设计程序改错题_相关文章专题_写写帮文库...
- 何时使用hadoop fs、hadoop dfs与hdfs dfs命令
- 重建程序员能力(2)-如何使asp.net mvc应用增加js和其他功能
- java 深入io_Java高级编程-IO操作深入
- 【整理】牛客网编程题前端篇(较难难度)
- mysql安装设置数据目录下_Windows下修改MySQL安装目录和MySQL数据目录
- SCI/SSCI选刊神器之——Jane
- 机器学习(周志华)课后习题
- DNS - 什么是云解析DNS?
- Duality-Gated Mutual Condition Network for RGBT Tracking
- 【NOIP2017】滚粗记
- 计算机研究生哪个子专业最容易考公务员
- SRS SDP解析流程
- php连接sqlserver数据库服务器(或者称mssql数据库)的几种方法
- 普通用户sftp 无法使用解决方法
- txt转shp,省标格式txt格式转shp批量转换
- Kibana 使用 KQL 查询语法-kibana 常用查询语法
- 医院无线认证平台怎么样
- html模拟手机页面