JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<div class="table-wrapper">
<div class="table-scroller">
  <table>
    <thead>
      <tr>
        <th class="table__col _head _sticky _first">is sticky</th>
        <th  class="table__col _sticky">Вопрос</th>
        <th>Ответ</th>
        <th>Комментарий</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="table__col _sticky _first">1</td>
        <td class="table__col _sticky">Можно ли закрепить колонку?</td>
        <td>Да, можно!</td>
        <td>Смотри этот пример</td>
      </tr>
      <tr>
        <td class="table__col _sticky _first">1</td>
        <td class="table__col _sticky">Можно ли закрепить колонку?</td>
        <td>Да, можно!</td>
        <td>Смотри этот пример</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

CSS

.table-wrapper {
  height: 250px;
  position: relative;
  width: 450px;  
}
.table-scroller {
  height: 250px;
  overflow: auto;
  margin-left: 240px;
  margin-top: 40px;
  width: 330px;  
}
table {
  width: 480px;
}
.table__col {
  width: 120px;
}
.table__col._sticky {
  left: 0;
  position: absolute;
  top: 0;
  width: 120px;
}
.table__col._sticky ~ .table__col._sticky {
  left: 120px;
}

tbody .table__col._sticky {
  top: 20px;
}