|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
表格(Table)表頭固定，內(nèi)容上滾【5個實(shí)例】
作者:admin 時間:2020-2-16 20:44:25 瀏覽:當(dāng)表格往上滾動的時候，表頭固定不動，這樣可以讓用戶時刻看清每一列的數(shù)據(jù)含義，這是人性化的設(shè)計，充分考慮了用戶使用體驗。本文將通過5個實(shí)例，來介紹這種表格設(shè)計。用戶可通過下載源碼，直接應(yīng)用于自己的項目里。
Table表格往上滾，表頭固定不動
實(shí)例1
實(shí)例1：Table表格往上滾，表頭固定不動
html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table V01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* {
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;
}
/*---------------------------------------------*/
</style>
</head>
<body>
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div class="table100 ver1 m-b-110">
<div class="table100-head">
<table>
<thead>
<tr class="row100 head">
<th class="cell100 column1">Class name</th>
<th class="cell100 column2">Type</th>
<th class="cell100 column3">Hours</th>
<th class="cell100 column4">Trainer</th>
<th class="cell100 column5">Spots</th>
</tr>
</thead>
</table>
</div>
<div class="table100-body">
<table>
<tbody>
<tr class="row100 body">
<td class="cell100 column1">Like a butterfly</td>
<td class="cell100 column2">Boxing</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Aaron Chapman</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Mind & Body</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Adam Stewart</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Crit Cardio</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">9:00 AM - 10:00 AM</td>
<td class="cell100 column4">Aaron Chapman</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Wheel Pose Full Posture</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">7:00 AM - 8:30 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Playful Dancer's Flow</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Zumba Dance</td>
<td class="cell100 column2">Dance</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Cardio Blast</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Pilates Reformer</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Supple Spine and Shoulders</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">6:30 AM - 8:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Yoga for Divas</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Virtual Cycle</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Like a butterfly</td>
<td class="cell100 column2">Boxing</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Aaron Chapman</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Mind & Body</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Adam Stewart</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Crit Cardio</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">9:00 AM - 10:00 AM</td>
<td class="cell100 column4">Aaron Chapman</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Wheel Pose Full Posture</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">7:00 AM - 8:30 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Playful Dancer's Flow</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Zumba Dance</td>
<td class="cell100 column2">Dance</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Cardio Blast</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">5:00 PM - 7:00 PM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Pilates Reformer</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">10</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Supple Spine and Shoulders</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">6:30 AM - 8:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">15</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Yoga for Divas</td>
<td class="cell100 column2">Yoga</td>
<td class="cell100 column3">9:00 AM - 11:00 AM</td>
<td class="cell100 column4">Donna Wilson</td>
<td class="cell100 column5">20</td>
</tr>
<tr class="row100 body">
<td class="cell100 column1">Virtual Cycle</td>
<td class="cell100 column2">Gym</td>
<td class="cell100 column3">8:00 AM - 9:00 AM</td>
<td class="cell100 column4">Randy Porter</td>
<td class="cell100 column5">20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
實(shí)例2
實(shí)例2：Table表格往上滾，表頭固定不動
實(shí)例3
實(shí)例3：Table表格往上滾，表頭固定不動
實(shí)例4
實(shí)例4：Table表格往上滾，表頭固定不動
實(shí)例5
實(shí)例5：Table表格往上滾，表頭固定不動
相關(guān)文章
- 4款簡單常見的純CSS表格(table)樣式
- 4款純CSS實(shí)現(xiàn)的響應(yīng)式表格(Responsive Table)實(shí)例
- CSS Loading 左右滾動加載動畫等5實(shí)例【源碼下載】
- 點(diǎn)擊按鈕網(wǎng)頁居中滑出覆蓋層和消息提示盒子
- CSS3+JQuery實(shí)現(xiàn)的三級下拉導(dǎo)航菜單
- 漂亮的注冊和登錄切換表單【html5和css3實(shí)現(xiàn)】
- CSS懸停效果按鈕一簡單實(shí)例（鼠標(biāo)移到按鈕上變成其他顏色）
- 漂亮的css3圓形鼠標(biāo)懸停效果實(shí)例
- 使用css轉(zhuǎn)換和3d旋轉(zhuǎn)的圓形鼠標(biāo)懸停效果【2例】
- 很好看的css3動畫按鈕鼠標(biāo)懸停效果【2個實(shí)例】
- 漂亮懸停效果的CSS3動畫按鈕【5個實(shí)例代碼】
- 漂亮的偽元素CSS按鈕5個實(shí)例代碼
- CSS實(shí)現(xiàn)模式窗口(modal window)覆蓋層的3種方法
- 用純CSS實(shí)現(xiàn)各種方向的箭頭【在線演示和源碼下載】
- 純CSS實(shí)現(xiàn)上下左右箭頭（>）【在線演示及源碼下載】
x
- 站長推薦
