JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <table class="gestion-table gestion-table-head ">
        <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>
    </table>
    <div class="sub-container">
        <table class="gestion-table">
            <tbody class="table-hover">
            <tr>
                <td style="width: 15%;">Element 1</td>
                <td style="width: 45%;">Element 2</td>
                <td style="width: 10%;">Element 3</td>
                <td style="width: 15%;">Element 4</td>
                <td style="width: 15%;">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>
               ...

CSS

/* IT's just for the style, please jump to line 44 */
.container{
    width: 90%;
    margin: auto;
}
.sub-container{
  height:192px;
  overflow-y: auto;
 // width: 90%;
}
.gestion-table {
	background: white;
	//margin: auto;
	//width: 90%;
	border-collapse: collapse;
}

.gestion-table-head {
  margin-right: 15px;
}

.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-row-group;
	//display: block;
	overflow-y: auto;
	width: 100%;
	max-height: 150px;
}