JSFiddle - React, Tailwind, and code Playground

HTML

<table class="gestion-table">
	<thead>
		<tr>
			<th style="width: 15%;">Field 1 </th>
			<th style="width: 45%;">Field 2 </th>
			<th style="width: 10%;">Field 3 </th>
			<th style="width: 15%;">Field 4 </th>
			<th style="width: 15%;">Field 5 </th>
		</tr>
	</thead>
	<tbody class="table-hover">
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element 3</td>
			<td>Element 4</td>
			<td>Element 5</td>
		</tr>
		<tr>
			<td>Element 1</td>
			<td>Element 2</td>
			<td>Element...

CSS

/* IT's just for the style, please jump to line 44 */

.gestion-table {
	background: white;
	margin: auto;
	width: 90%;
	border-collapse: collapse;
}

.gestion-table th {
	color:#D5DDE5;
	background:#1b1e24;
	font-size: 18px;
	padding:10px;
	vertical-align:middle;
  border-right: 1px solid white;
}
  
.gestion-table tr {
	color:#666B85;
	font-size:16px;
}
 
.gestion-table tr:hover td {
	background:#4E5066;
	color:#FFFFFF;
}
 
.gestion-table tr:nth-child(odd) td {
	background:#EBEBEB;
}
 
.gestion-table tr:nth-child(odd):hover td {
	background:#4E5066;
}
 
.gestion-table td {
	background:#FFFFFF;
	padding:10px;
	font-size:16px;
	border-right: 1px solid #C1C3D1;
}

/* HERE STARTS THE PROBLEM */
//Switch between the two display methods on the tbody and see the result
//I'm searching for scrollable tbody with max-height of 150px for example

.gestion-table thead {
	display:table-header-group;
	width: 100%;
}

.gestion-table tbody {
	//display:table-header-group;
	display: block;
	overflow-y: auto;
	width: 100%;
	max-height: 150px;
}