JSFiddle - React, Tailwind, and code Playground
HTML
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
<th>Item 2</th>
<th>Item 3</th>
<th>Item 4</th>
<th>Item 5</th>
<th>Item 6</th>
<th>Item 7</th>
<th>Item 8</th>
<th>Item 9</th>
<th>Item 10</th>
<th>Item 11</th>
<th>Item 12</th>
<th>Item 13</th>
<th>Item 14</th>
<th>Item 15</th>
<th>Item 16</th>
<th>Item 17</th>
<th>Item 18</th>
<th>Item 19</th>
<th>Item 20</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
</tr>
<tr>
<th>Jan</th>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
<td>3163</td>
...
CSS
.table-wrapper {
overflow:auto;
}
.header{float:left;width:100%;background:#fff;height:60px;}
.header tr{position:fixed;background:#fff;}
th:first-child {
position: fixed;
left: 5px
}