当表格往上滚动的时候，表头固定不动，这样可以让用户时刻看清每一列的数据含义，这是人性化的设计，充分考虑了用户使用体验。本文将通过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;

}

/*---------------------------------------------*/

实例2

实例2：Table表格往上滚，表头固定不动

实例3

实例3：Table表格往上滚，表头固定不动

实例4

实例4：Table表格往上滚，表头固定不动

实例5

实例5：Table表格往上滚，表头固定不动