JSFiddle - React, Tailwind, and code Playground

by Girisha Chennura

HTML

<link rel="stylesheet" href="https://manage.gb1s.brightbox.com/assets/application-c8352e88fa473e3f23409385688bb7af.css">
<div class="table-container">
	<table class="table table-striped table-fixed-header">
      	<thead>
        	<tr>
				<th></th>
				<th>Identifier</th>
				<th>Name</th>
				<th></th>
				<th>Image</th>
				<th>Type</th>
				<th>Zone</th>
				<th class="center">Cloud IPs</th>
				<th class="center">Groups</th>
				<th>Actions</th>
        	</tr>
      	</thead>
  		<tbody>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
  			<tr>
				<td>A</td>
				<td>B</td>
				<td>C</td>
				<td>D</td>
				<td>E</td>
				<td>F</td>
				<td>G</td>
				<td>H</td>
				<td>I</td>
				<td>J</td>
			</tr>
 ...

SCSS

.table-fixed-header {
    height: 235px; 

    tr {
        width: 100%;
        display: inline-table;
    }
    
    tbody{
      overflow-y: scroll;
      height: 230px;
      width: 100%;
      position: absolute;
    }
}