<!DOCTYPE html>
<html lang="en">
<head>
<title>Table_Fixed_Header</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
.limiter * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/*==================================================================
[ 表格宽度 ]*/
.limiter {
width: 80%;
margin: 100px auto 0;
}
/*---------------------------------------------*/
.container-table {
width: 100%;
background: #fff;
padding: 0px 30px;
}
.wrap-table {
width: 100%;
}
.table {
background-color: #fff;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: center;
font-weight: bold;
border: 1px solid gray;
}
td {
font-weight: unset;
text-align: center;
border: 1px solid gray;
}
/*==================================================================
[ 单元格宽度 ]*/
.column1 {
width: 33%;
}
.column2 {
width: 13%;
}
.column3 {
width: 22%;
}
.column4 {
width: 19%;
}
.column5 {
width: 13%;
}
/*---------------------------------------------*/
.table-head th {
padding-top: 10px;
padding-bottom: 10px;
}
.table-body td {
height: 46px;
}
/*==================================================================
[ Fix header ]*/
.table {
position: relative;
padding-top: 46px;
}
.table-head {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.table-body {
max-height: 231px;
overflow: auto;
}
/*==================================================================
[ Ver1 ]*/
.table.ver1 th {
font-family: Lato-Bold;
font-size: 18px;
color: #333;
background-color: #e5e5e5;
}
.table.ver1 td {
font-family: Lato-Regular;
font-size: 14px;
color: #808080;
}
</style>
</head>
<body>
<div class="limiter">
<div class="container-table">
<div class="wrap-table">
<div class="table ver1 m-b-110">
<div class="table-head">
<table>
<thead>
<tr class="row head">
<th class="cell column1">Class name</th>
<th class="cell column2">Type</th>
<th class="cell column3">Hours</th>
<th class="cell column4">Trainer</th>
<th class="cell column5">Spots</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<tbody>
<tr class="row body">
<td class="cell column1">Like a butterfly</td>
<td class="cell column2">Boxing</td>
<td class="cell column3">9:00 AM - 11:00 AM</td>
<td class="cell column4">Aaron Chapman</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Mind & Body</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">8:00 AM - 9:00 AM</td>
<td class="cell column4">Adam Stewart</td>
<td class="cell column5">15</td>
</tr>
<tr class="row body">
<td class="cell column1">Crit Cardio</td>
<td class="cell column2">Gym</td>
<td class="cell column3">9:00 AM - 10:00 AM</td>
<td class="cell column4">Aaron Chapman</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Wheel Pose Full Posture</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">7:00 AM - 8:30 AM</td>
<td class="cell column4">Donna Wilson</td>
<td class="cell column5">15</td>
</tr>
<tr class="row body">
<td class="cell column1">Playful Dancer's Flow</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">8:00 AM - 9:00 AM</td>
<td class="cell column4">Donna Wilson</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Zumba Dance</td>
<td class="cell column2">Dance</td>
<td class="cell column3">5:00 PM - 7:00 PM</td>
<td class="cell column4">Donna Wilson</td>
<td class="cell column5">20</td>
</tr>
<tr class="row body">
<td class="cell column1">Cardio Blast</td>
<td class="cell column2">Gym</td>
<td class="cell column3">5:00 PM - 7:00 PM</td>
<td class="cell column4">Randy Porter</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Pilates Reformer</td>
<td class="cell column2">Gym</td>
<td class="cell column3">8:00 AM - 9:00 AM</td>
<td class="cell column4">Randy Porter</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Supple Spine and Shoulders</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">6:30 AM - 8:00 AM</td>
<td class="cell column4">Randy Porter</td>
<td class="cell column5">15</td>
</tr>
<tr class="row body">
<td class="cell column1">Yoga for Divas</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">9:00 AM - 11:00 AM</td>
<td class="cell column4">Donna Wilson</td>
<td class="cell column5">20</td>
</tr>
<tr class="row body">
<td class="cell column1">Virtual Cycle</td>
<td class="cell column2">Gym</td>
<td class="cell column3">8:00 AM - 9:00 AM</td>
<td class="cell column4">Randy Porter</td>
<td class="cell column5">20</td>
</tr>
<tr class="row body">
<td class="cell column1">Like a butterfly</td>
<td class="cell column2">Boxing</td>
<td class="cell column3">9:00 AM - 11:00 AM</td>
<td class="cell column4">Aaron Chapman</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Mind & Body</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">8:00 AM - 9:00 AM</td>
<td class="cell column4">Adam Stewart</td>
<td class="cell column5">15</td>
</tr>
<tr class="row body">
<td class="cell column1">Crit Cardio</td>
<td class="cell column2">Gym</td>
<td class="cell column3">9:00 AM - 10:00 AM</td>
<td class="cell column4">Aaron Chapman</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Wheel Pose Full Posture</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">7:00 AM - 8:30 AM</td>
<td class="cell column4">Donna Wilson</td>
<td class="cell column5">15</td>
</tr>
<tr class="row body">
<td class="cell column1">Playful Dancer's Flow</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">8:00 AM - 9:00 AM</td>
<td class="cell column4">Donna Wilson</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Zumba Dance</td>
<td class="cell column2">Dance</td>
<td class="cell column3">5:00 PM - 7:00 PM</td>
<td class="cell column4">Donna Wilson</td>
<td class="cell column5">20</td>
</tr>
<tr class="row body">
<td class="cell column1">Cardio Blast</td>
<td class="cell column2">Gym</td>
<td class="cell column3">5:00 PM - 7:00 PM</td>
<td class="cell column4">Randy Porter</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Pilates Reformer</td>
<td class="cell column2">Gym</td>
<td class="cell column3">8:00 AM - 9:00 AM</td>
<td class="cell column4">Randy Porter</td>
<td class="cell column5">10</td>
</tr>
<tr class="row body">
<td class="cell column1">Supple Spine and Shoulders</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">6:30 AM - 8:00 AM</td>
<td class="cell column4">Randy Porter</td>
<td class="cell column5">15</td>
</tr>
<tr class="row body">
<td class="cell column1">Yoga for Divas</td>
<td class="cell column2">Yoga</td>
<td class="cell column3">9:00 AM - 11:00 AM</td>
<td class="cell column4">Donna Wilson</td>
<td class="cell column5">20</td>
</tr>
<tr class="row body">
<td class="cell column1">Virtual Cycle</td>
<td class="cell column2">Gym</td>
<td class="cell column3">8:00 AM - 9:00 AM</td>
<td class="cell column4">Randy Porter</td>
<td class="cell column5">20</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号