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 {
    width: 100%;
    table-layout: fixed;

    thead, tbody, tr, td, th {
        display: block;
    }

    tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    thead th {
        height: 30px;
    }

    tbody {
        height: 235px;
        overflow-y: auto;
    }

    tbody td, thead th {
        float: left;
        width: 10%;
        box-sizing: border-box;
    }
}