You can just make the first column position: sticky; z-index: 9.
It will make the column/row stick to its current position.
Checkout my example codepen here https://codepen.io/swastikmishra/pen/zYYdKBQ
HTML Example
<style type="text/css">
table{ text-align: center; }
.table-container{ width: 500px; height: 300px; overflow: scroll;}
table th, table td {
white-space: nowrap;
padding: 10px 20px;
font-family: Arial;
}
table tr th:first-child, table td:first-child{
position: sticky;
width: 100px;
left: 0;
z-index: 10;
background: #fff;
}
table tr th:first-child{
z-index: 11;
}
table tr th{
position: sticky;
top: 0;
z-index: 9;
background: #fff;
}
</style>
<div class="table-container">
<table>
<tr><th>Hello World</th><th>Hello World</th><th>Hello World</th><th>Hello World</th><th>Hello World</th><th>Hello World</th><th>Hello World</th></tr>
<tr><td>H11</td><td>H12</td><td>H13</td><td>H14</td><td>H15</td><td>H16</td><td>H17</td></tr>
<tr><td>H21</td><td>H22</td><td>H23</td><td>H24</td><td>H25</td><td>H26</td><td>H27</td></tr>
<tr><td>H31</td><td>H32</td><td>H33</td><td>H34</td><td>H35</td><td>H36</td><td>H37</td></tr>
<tr><td>H41</td><td>H42</td><td>H44</td><td>H44</td><td>H45</td><td>H46</td><td>H47</td></tr>
<tr><td>H51</td><td>H52</td><td>H54</td><td>H54</td><td>H55</td><td>H56</td><td>H57</td></tr>
<tr><td>H61</td><td>H62</td><td>H64</td><td>H64</td><td>H65</td><td>H66</td><td>H67</td></tr>
<tr><td>H71</td><td>H72</td><td>H74</td><td>H74</td><td>H75</td><td>H76</td><td>H77</td></tr>
<tr><td>H81</td><td>H82</td><td>H84</td><td>H84</td><td>H85</td><td>H86</td><td>H87</td></tr>
</table>
</div>