<div class="wrapper">
<div class="table-container">
<table class="sticky-head">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
<th>Role</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arthur</td>
<td>26</td>
<td>Web developer</td>
<td>Moderator</td>
<td>120</td>
</tr>
<tr>
<td>Olivia</td>
<td>28</td>
<td>Project manager</td>
<td>User</td>
<td>122</td>
</tr>
<tr>
<td>Robert</td>
<td>38</td>
<td>Project manager</td>
<td>User</td>
<td>112</td>
</tr>
<tr>
<td>Emil</td>
<td>18</td>
<td>Project manager</td>
<td>User</td>
<td>102</td>
</tr>
<tr>
<td>Kathlyn</td>
<td>32</td>
<td>Project manager</td>
<td>User</td>
<td>104</td>
</tr>
<tr>
<td>Elisa</td>
<td>38</td>
<td>Web developer</td>
<td>Moderator</td>
<td>132</td>
</tr>
<tr>
<td>Arthur</td>
<td>26</td>
<td>Web developer</td>
<td>Moderator</td>
<td>120</td>
</tr>
<tr>
<td>Olivia</td>
<td>28</td>
<td>Project manager</td>
<td>User</td>
<td>122</td>
</tr>
<tr>
<td>Robert</td>
<td>38</td>
<td>Project manager</td>
<td>User</td>
<td>112</td>
</tr>
<tr>
<td>Emil</td>
<td>18</td>
<td>Project manager</td>
<td>User</td>
<td>102</td>
</tr>
<tr>
<td>Kathlyn</td>
<td>32</td>
<td>Project manager</td>
<td>User</td>
<td>104</td>
</tr>
<tr>
<td>Elisa</td>
<td>38</td>
<td>Web developer</td>
<td>Moderator</td>
<td>132</td>
</tr>
</tbody>
</table>
</div>
<form>
<div class="radio-group radio-sticky">
<p>Set sticky:</p>
<div class="input">
<input type="radio" id="px" name="sticky" value="sticky-head" checked>
<label for="px">head</label>
</div>
<div class="input">
<input type="radio" id="full" name="sticky" value="sticky-column">
<label for="full">column</label>
</div>
<div class="input">
<input type="radio" id="full" name="sticky" value="sticky-head-column">
<label for="full">head and column</label>
</div>
</div>
</form>
</div>
.wrapper,
form {
display: flex;
flex-direction: row;
}
.table-container {
width: 600px;
border: 1px solid red;
max-height: 200px;
overflow: auto;
}
table {
table-layout: auto;
width: 700px;
border-collapse: collapse;
border-style: hidden;
transition: all 0.2s;
&.sticky-head, &.sticky-head-column {
thead {
position: sticky;
top: 0;
background: white;
border: 1px solid;
z-index: 1;
}
}
&.sticky-column, &.sticky-head-column {
td:first-child, th:first-child {
position: sticky;
left: 0;
}
}
th {
border: 1px solid black;
height: 20px;
padding: 0;
text-align: center;
background: white;
}
tr {
height: 2.5rem;
text-align: center;
&:nth-child(even) td {
background-color: lightgray;
}
&:nth-child(odd) td {
background-color: white;
}
}
td {
border: 1px solid black;
transition: all 0.2s;
}
}
.radio-group {
display: flex;
flex-direction: column;
padding: 30px;
.input {
display: flex;
flex-direction: row;
}
}
View Compiled
const table = document.querySelector("table");
const inputs = document.querySelectorAll(".input");
const stickyInputs = document.querySelectorAll("input[name='sticky']");
function assignClasses() {
stickyInputs.forEach((input) => {
input.checked
? table.classList.add(input.value)
: table.classList.remove(input.value);
});
}
inputs.forEach((input) => input.addEventListener("click", assignClasses));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.