JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"> 
<table class="grid" style="width: 100%;"><thead><tr><th> ID</th><th> name</th><th> Type</th><th> Type</th><th> Type</th><th> Type</th><th> Type</th><th> Type</th><th> Type</th><th> Type</th><th> Hours</th><th> Trainer</th><th> Кол-во Название</th><th> Spots</th><th>...

SCSS

.container {
    max-width:300px;
  max-height:300px;
  border:1px solid red;
  overflow:auto;
  
}

.grid {
 
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;

  position: relative;

  & td {
    
    padding: 8px;
  }

  & th {
    padding: 8px;
    top: 0;
    overflow-y: auto;
    position:sticky;
  }

  & th:first-child {
    border-radius: 10px 0 0 0;
  }
  & th:last-child {
    border-radius: 0 10px 0 0;
  }

  & tr:nth-child(even) {
    background-color: #f5f5f5;
  }

  & tr:hover {
    background-color: #ddd;
  }

  & th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background: #36304a;
    color: white;
  }



}