JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div> navigation</div>
<div class="table_wrapper">
<table>
<thead>
<tr>
<th>
profile
</th>
<th>
profile
</th>
<th>
profile
</th>
<th>
profile
</th>
<th>
profile
</th> <th>
profile
</th> <th>
profile
</th> <th>
profile
</th> <th>
profile
</th> <th>
profile
</th> <th>
profile
</th>
</tr>
</thead>
<tbody> <tr>
<td>
tbody
</td>
<td>
tbody
</td>
<td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td><td>
tbody
</td>
</tr>
<tr>
<td>
tbody
</td>
</tr><tr>
<td>
tbody
</td>
</tr><tr>
<td>
tbody
</td>
</tr><tr>
<td>
tbody
</td>
</tr><tr>
<td>
tbody
</td>
</tr><tr>
<td>
tbody
</td>
</tr><tr>
<td>
tbody
</td>
</tr><tr>
<td>
tbody
</td>
</tr><tr>
<td>
tbody
</td>
</tr><tr>
...
CSS
body{
padding: 0;
margin: 0;
}
thead tr th{
padding-right: 15px;
}
.wrapper{
display: flex;
flex-direction: column;
background-color: red;
max-height: 100vh;
}
.table_wrapper {
flex-grow: 1;
overflow: auto;
}
.table_wrapper table{
display: flex;
flex-direction: column;
}
.pagination{
background-color: blue;
color: #fff;
}