JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<div class="container">
  <table>
    <thead>
      <tr>
        <th>Lp</th>
        <th>
          <div class="content">
            <span>Header 1</span>
            <span id="grip">&nbsp;</span>
          </div>
        </th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>134</td>
        <td>53</td>
        <td>53</td>
        <td>85</td>
        <td>23</td>
        <td>54</td>
        <td>12</td>
      </tr>
      <tr>
        <td>2</td>
        <td>73</td>
        <td>2</td>
        <td>83</td>
        <td>21</td>
        <td>53</td>
        <td>98</td>
        <td>12</td>
      </tr>
      <tr>
        <td>3</td>
        <td>61</td>
        <td>33</td>
        <td>63</td>
        <td>85</td>
        <td>23</td>
        <td>42</td>
        <td>14</td>
      </tr>
      <tr>
        <td>4</td>
        <td>8</td>
        <td>10</td>
        <td>32</td>
        <td>23</td>
        <td>12</td>
        <td>63</td>
        <td>8</td>
      </tr>
      <tr>
        <td>5</td>
        <td>52</td>
        <td>12</td>
        <td>73</td>
        <td>12</td>
        <td>75</td>
        <td>52</td>
        <td>14</td>
      </tr>
      <tr>
        <td>6</td>
        <td>15</td>
        <td>73</td>
        <td>21</td>
        <td>15</td>
        <td>62</td>
        <td>84</td>
        <td>2</td>
      </tr>
      <tr>
        <td>7</td>
        <td>93</td>
        <td>9</td>
        <td>11</td>
        <td>62</td>
        <td>5</td>
        <td>14</td>
        <td>12</td>
      </tr>
      <tr>
        <td>8</td>
        <td>3</td>
        <td>3</td>
        <td>85</td>
        <td>41</td>
        <td>73</td>
        <td>12</td>
        <td>12</td>
      </tr>
       <tr>
        <td>9</td>
       ...

CSS

.container { 
  overflow: auto;
 max-height: 200px;
/*  uncomment this to make it Y-scrollable */
 width: 600px;
}
#grip{
  width: 4px;
  border: 0.5px solid red;
  cursor: col-resize;
}
.content{
  display: flex;
  padding-left: 5px;
  justify-content: space-between;
}
table {
  border-collapse: collapse;
/*   table-layout: fixed; */
}

table, thead tr th, tbdoy tr td, tfoot th {
  border: 1px solid black;
}

thead tr th:first-child {
  position: sticky;
  left: 0;
  z-index: 10;
 }

tbody tr td {
  text-align: center;  
}

tbody tr td:first-child{
  position: sticky;
  left: 0;
  background-color: #fff;
}

thead {
  background-color: #F0F0F0;
}

thead th {
  border: 1px solid black;
  background-color: #F0F0F0;
  position: sticky;
  top: 0;
  min-width: 100px;
  user-select: none;
}

thead th:fist-child {
  position: sticky;
  left: 0;
}

tbody tr td:not(:first-child) {
  border: 1px solid black;
  text-align: right;
}

tfoot th:first-child {
    position: sticky;
    left: 0 !important;
    z-index: 10;
}

tfoot th {
  background-color: #F0F0F0;
  position: sticky;
  bottom: 0;
}

tfoot td {
  text-align: right;
}

tfoot td {
  background-color: #F0F0F0;
  position: sticky;
  bottom: 0;
}

JavaScript

(function(){ 
	let startOffset = null;
	const thResizable = document.querySelector('.content').parentElement;
  
	document.addEventListener('mousemove', (event) => {
		if(startOffset){
    	const currentWidth = event.pageX + startOffset;
      thResizable.style.width = `${currentWidth}px`;
  	}
	});
  
	document.addEventListener('mouseup', (event) => { 
  	startOffset = null;
	});
  
	document
		.getElementById("grip")
  	.addEventListener('mousedown', (event) => {
    	event.stopPropagation();
  		startOffset = thResizable.offsetWidth - event.pageX;
  	});
  })();