Table with fixed header on scroll
HTML
<!doctype html>
<div class="container">
<div class="table-holder">
<table>
<thead>
<tr>
<th data-html="Rank">Rank</th>
<th data-html="Rating">Rating</th>
<th data-html="Title">Title</th>
<th data-html="No. of Reviews">No. of Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>98%</td>
<td>Zootopia (2016)</td>
<td>217</td>
</tr>
<tr>
<td></td>
<td>99%</td>
<td>Love & Friendship (2016)</td>
<td>146</td>
</tr>
<tr>
<td></td>
<td>94%</td>
<td>The Jungle Book (2016)</td>
<td>253</td>
</tr>
<tr>
<td></td>
<td>99%</td>
<td>Embrace Of The Serpent (El Abrazo De La Serpiente) (2016)</td>
<td>110</td>
</tr>
<tr>
<td></td>
<td>99%</td>
<td>Hunt for the Wilderpeople (2016)</td>
<td>109</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>Captain America: Civil War (2016)</td>
<td>319</td>
</tr>
<tr>
<td></td>
<td>94%</td>
<td>Finding Dory (2016)</td>
<td>217</td>
</tr>
<tr>
<td></td>
<td>97%</td>
<td>Sing Street (2016)</td>
<td>145</td>
</tr>
<tr>
<td></td>
<td>95%</td>
<td>Eye In The Sky (2016)</td>
<td>173</td>
</tr>
<tr>
<td></td>
<td>100%</td>
<td>Only Yesterday (2016)</td>
<td>48</td>
</tr>
<tr>
<td></td>
<td>91%</td>
<td>The Witch (2016)</td>
<td>258</td>
</tr>
<tr>
<td></td>
<td>100%</td>
<td>The Wailing (Goksung) (2016)</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td>91%</td>
<td>The Nice Guys (2016)</td>
<td>242</td>
</tr>
<tr>
<td></td>
<td>96%</td>
<td>Weiner (2016)</td>
<td>123</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>10 Cloverfield Lane (2016)</td>
<td>253</td>
</tr>
<tr>
<td></td>
<td>98%</td>
<td>April and the Extraordinary World (Avril et le monde truqué) (2016)</td>
<td>44</td>
</tr>
<tr>
<td></td>
<td>96%</td>
<td>Marguerite (2016)</td>
<td>91</td>
</tr>
<tr>
<td></td>
<td>97%</td>
<td>Dark Horse (2016)</td>
<td>66</td>
</tr>
<tr>
<td></td>
<td>98%</td>
<td>Aferim! (2016)</td>
<td>40</td>
</tr>
<tr>
<td></td>
<td>97%</td>
<td>The Dark Horse (2016)</td>
<td>61</td>
</tr>
<tr>
<td></td>
<td>97%</td>
<td>Krisha (2016)</td>
<td>59</td>
</tr>
<tr>
<td></td>
<td>97%</td>
<td>Cemetery of Splendor (2016)</td>
<td>58</td>
</tr>
<tr>
<td></td>
<td>91%</td>
<td>Green Room (2016)</td>
<td>184</td>
</tr>
<tr>
<td></td>
<td>95%</td>
<td>Rams (Hrútar) (2016)</td>
<td>85</td>
</tr>
<tr>
<td></td>
<td>96%</td>
<td>The Fits (2016)</td>
<td>56</td>
</tr>
<tr>
<td></td>
<td>95%</td>
<td>De Palma (2016)</td>
<td>75</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>The Lobster (2016)</td>
<td>185</td>
</tr>
<tr>
<td></td>
<td>85%</td>
<td>Hail, Caesar! (2016)</td>
<td>287</td>
</tr>
<tr>
<td></td>
<td>94%</td>
<td>Tickled (2016)</td>
<td>63</td>
</tr>
<tr>
<td></td>
<td>84%</td>
<td>Deadpool (2016)</td>
<td>274</td>
</tr>
<tr>
<td></td>
<td>89%</td>
<td>A Bigger Splash (2016)</td>
<td>141</td>
</tr>
<tr>
<td></td>
<td>87%</td>
<td>Everybody Wants Some!! (2016)</td>
<td>186</td>
</tr>
<tr>
<td></td>
<td>93%</td>
<td>The Last Man On The Moon (2016)</td>
<td>42</td>
</tr>
<tr>
<td></td>
<td>91%</td>
<td>A War (Krigen) (2016)</td>
<td>75</td>
</tr>
<tr>
<td></td>
<td>92%</td>
<td>The Measure of a Man (La loi du marché) (2016)</td>
<td>51</td>
</tr>
<tr>
<td></td>
<td>92%</td>
<td>Life, Animated (2016)</td>
<td>50</td>
</tr>
<tr>
<td></td>
<td>92%</td>
<td>Florence Foster Jenkins (2016)</td>
<td>49</td>
</tr>
<tr>
<td></td>
<td>91%</td>
<td>Our Little Sister (Umimachi Diary) (2016)</td>
<td>68</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>Barbershop: The Next Cut (2016)</td>
<td>83</td>
</tr>
<tr>
<td></td>
<td>89%</td>
<td>Dheepan (2016)</td>
<td>101</td>
</tr>
<tr>
<td></td>
<td>91%</td>
<td>The Innocents (Les innocentes) (2016)</td>
<td>45</td>
</tr>
<tr>
<td></td>
<td>91%</td>
<td>Mia Madre (2016)</td>
<td>45</td>
</tr>
<tr>
<td></td>
<td>89%</td>
<td>Star Trek Beyond (2016)</td>
<td>79</td>
</tr>
<tr>
<td></td>
<td>86%</td>
<td>Kung Fu Panda 3 (2016)</td>
<td>148</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>The Clan (El Clan) (2016)</td>
<td>52</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>City Of Gold (2016)</td>
<td>52</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>My Golden Days (Trois Souvenirs De Ma Jeunesse) (2016)</td>
<td>48</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>Raiders!: The Story of the Greatest Fan Film Ever Made (2016)</td>
<td>42</td>
</tr>
<tr>
<td></td>
<td>90%</td>
<td>Microbe and Gasoline (Microbe et Gasoil) (2016)</td>
<td>41</td>
</tr>
<tr>
<td></td>
<td>88%</td>
<td>The Invitation (2016)</td>
<td>84</td>
</tr>
</tbody>
</table>
</div>
</div>
SCSS
$color: #222;
$width: 96%;
$max-width: 768px;
$padding: .5em;
table {
border-collapse: collapse;
cursor: default;
width: 100%;
/*thead::before {
background-color: $color;
content: "\00A0"; // white space
padding: $padding;
position: absolute;
max-width: $max-width - 17; // scrollbar width
width: calc(#{$width} - 17px);
z-index: 1;
}*/
th, td {
padding: $padding;
}
th {
background-color: $color;
color: #fff;
font-weight: normal;
padding: $padding;
position: sticky;
text-align: left;
top: 0;
white-space: nowrap;
/*&::before {
content: attr(data-html);
margin: -$padding;
padding: inherit;
position: absolute;
white-space: nowrap;
z-index: 2;
}*/
}
td {
border-bottom: 1px solid #ccc;
text-align: center;
&:first-child::before {
counter-increment: rank;
content: counter(rank) ".";
}
&:nth-child(3) {
text-align: left;
}
}
tr {
&:nth-child(even) td {
background-color: scale-color($color, $alpha: -95%);
}
&:hover td {
background-color: scale-color($color, $alpha: -90%);
}
}
}
// Stage
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
&::before, &::after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
}
html, body, .container {
height: 100%;
}
body {
color: #333;
counter-reset: rank;
overflow: hidden;
}
.container {
margin: 1em auto;
max-width: $max-width;
width: $width;
}
.table-holder {
height: 24em;
overflow-y: scroll;
}
JAVASCRIPT
/*
* 1. There are no relative parent elements.
* 2. In this case avoid to use top, right, bottom
* and left on any absolute positioned element.
*/
