<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));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.