HTML
xxxxxxxxxx1
<section class="intro">2
<div class="bg-image h-100" style="background-color: #f5f7fa;">3
<div class="mask d-flex align-items-center h-100">4
<div class="container">5
<div class="row justify-content-center">6
<div class="col-12">7
<div class="card">8
<div class="card-body p-0">9
<div class="table-responsive table-scroll" data-mdb-perfect-scrollbar="true" style="position: relative; height: 700px">10
<table class="table table-striped mb-0">11
<thead style="background-color: #002d72;">12
<tr>13
<th scope="col">Class name</th>14
<th scope="col">Type</th>15
<th scope="col">Hours</th>16
<th scope="col">Trainer</th>17
<th scope="col">Spots</th>18
</tr>19
</thead>20
<tbody>21
<tr>22
<td>Like a butterfly</td>23
<td>Boxing</td>24
<td>9:00 AM - 11:00 AM</td>25
<td>Aaron Chapman</td>26
<td>10</td>27
</tr>28
<tr>29
<td>Mind & Body</td>30
<td>Yoga</td>31
<td>8:00 AM - 9:00 AM</td>32
<td>Adam Stewart</td>33
<td>15</td>34
</tr>35
<tr>36
<td>Crit Cardio</td>37
<td>Gym</td>38
<td>9:00 AM - 10:00 AM</td>39
<td>Aaron Chapman</td>40
<td>10</td>41
</tr>42
<tr>43
<td>Wheel Pose Full Posture</td>44
<td>Yoga</td>45
<td>7:00 AM - 8:30 AM</td>46
<td>Donna Wilson</td>47
<td>15</td>48
</tr>49
<tr>50
<td>Playful Dancer's Flow</td>51
<td>Yoga</td>52
<td>8:00 AM - 9:00 AM</td>53
<td>Donna Wilson</td>54
<td>10</td>55
</tr>56
<tr>57
<td>Zumba Dance</td>58
<td>Dance</td>59
<td>5:00 PM - 7:00 PM</td>60
<td>Donna Wilson</td>61
<td>20</td>62
</tr>63
<tr>64
<td>Cardio Blast</td>65
<td>Gym</td>66
<td>5:00 PM - 7:00 PM</td>67
<td>Randy Porter</td>68
<td>10</td>69
</tr>70
<tr>71
<td>Pilates Reformer</td>72
<td>Gym</td>73
<td>8:00 AM - 9:00 AM</td>74
<td>Randy Porter</td>75
<td>10</td>76
</tr>77
<tr>78
<td>Supple Spine and Shoulders</td>79
<td>Yoga</td>80
<td>6:30 AM - 8:00 AM</td>81
<td>Randy Porter</td>82
<td>15</td>83
</tr>84
<tr>85
<td>Yoga for Divas</td>86
<td>Yoga</td>87
<td>9:00 AM - 11:00 AM</td>88
<td>Donna Wilson</td>89
<td>20</td>90
</tr>91
<tr>92
<td>Virtual Cycle</td>93
<td>Gym</td>94
<td>8:00 AM - 9:00 AM</td>95
<td>Randy Porter</td>96
<td>20</td>97
</tr>98
<tr>99
<td>Like a butterfly</td>100
<td>Boxing</td>101
<td>9:00 AM - 11:00 AM</td>102
<td>Aaron Chapman</td>103
<td>10</td>104
</tr>105
<tr>106
<td>Mind & Body</td>107
<td>Yoga</td>108
<td>8:00 AM - 9:00 AM</td>109
<td>Adam Stewart</td>110
<td>15</td>111
</tr>112
<tr>113
<td>Crit Cardio</td>114
<td>Gym</td>115
<td>9:00 AM - 10:00 AM</td>116
<td>Aaron Chapman</td>117
<td>10</td>118
</tr>119
<tr>120
<td>Wheel Pose Full Posture</td>121
<td>Yoga</td>122
<td>7:00 AM - 8:30 AM</td>123
<td>Donna Wilson</td>124
<td>15</td>125
</tr>126
<tr>127
<td>Playful Dancer's Flow</td>128
<td>Yoga</td>129
<td>8:00 AM - 9:00 AM</td>130
<td>Donna Wilson</td>131
<td>10</td>132
</tr>133
<tr>134
<td>Zumba Dance</td>135
<td>Dance</td>136
<td>5:00 PM - 7:00 PM</td>137
<td>Donna Wilson</td>138
<td>20</td>139
</tr>140
<tr>141
<td>Cardio Blast</td>142
<td>Gym</td>143
<td>5:00 PM - 7:00 PM</td>144
<td>Randy Porter</td>145
<td>10</td>146
</tr>147
<tr>148
<td>Pilates Reformer</td>149
<td>Gym</td>150
<td>8:00 AM - 9:00 AM</td>151
<td>Randy Porter</td>152
<td>10</td>153
</tr>154
<tr>155
<td>Supple Spine and Shoulders</td>156
<td>Yoga</td>157
<td>6:30 AM - 8:00 AM</td>158
<td>Randy Porter</td>159
<td>15</td>160
</tr>161
<tr>162
<td>Yoga for Divas</td>163
<td>Yoga</td>164
<td>9:00 AM - 11:00 AM</td>165
<td>Donna Wilson</td>166
<td>20</td>167
</tr>168
<tr>169
<td>Virtual Cycle</td>170
<td>Gym</td>171
<td>8:00 AM - 9:00 AM</td>172
<td>Randy Porter</td>173
<td>20</td>174
</tr>175
</tbody>176
</table>177
</div>178
</div>179
</div>180
</div>181
</div>182
</div>183
</div>184
</div>185
</section>CSS
xxxxxxxxxx1
html,2
body,3
.intro {4
height: 100%;5
}6
7
table td,8
table th {9
text-overflow: ellipsis;10
white-space: nowrap;11
overflow: hidden;12
}13
14
thead th {15
color: #fff;16
}17
18
.card {19
border-radius: .5rem;20
}21
22
.table-scroll {23
border-radius: .5rem;24
}25
26
.table-scroll table thead th {27
font-size: 1.25rem;28
}29
thead {30
top: 0;31
position: sticky;32
}JS
1
1
Console errors: 0