JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<table class="head" border="1" style="margin-bottom:0;">
<tr>
<th width="10%">Col 1</th>
<th width="10%">Col 2</th>
<th width="15%">Col 3</th>
<th width="30%">Col 4</th>
<th width="30%">Col 5</th>
<th width="5%" style=' padding:5px 0 5px 0;'> 6</th>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td width="10%">Nesto 1</td>
<td width="10%">Nesto 2</td>
<td width="15%"> NEsto 3</td>
<td width="30%">Nesto 4</td>
<td width="30%"> NEsto 3</td>
<td width="5%">4</td>
</tr>
<tr>
<td width="10%">Nesto 1</td>
<td width="10%">Nesto 2</td>
<td width="15%"> NEsto 3</td>
<td width="30%">Nesto 4</td>
<td width="30%"> NEsto 3</td>
<td width="5%">4</td>
</tr> <tr>
<td width="10%">Nesto 1</td>
<td width="10%">Nesto 2</td>
<td width="15%"> NEsto 3</td>
<td width="30%">Nesto 4</td>
<td width="30%"> NEsto 3</td>
<td width="5%"> 4</td>
</tr> <tr>
<td width="10%">Nesto 1</td>
<td width="10%">Nesto 2</td>
<td width="15%"> NEsto 3</td>
<td width="30%">Nesto 4</td>
<td width="30%"> NEsto 3</td>
<td width="5%"> 4</td>
</tr> <tr>
<td width="10%">Nesto 1</td>
<td width="10%">Nesto 2</td>
<td width="15%"> NEsto 3</td>
<td width="30%">Nesto 4</td>
<td width="30%"> NEsto 3</td>
<td width="5%"> 4</td>
</tr>
</table>
</div>
</div>
CSS
.wrap {
width: 100%;
}
.wrap table {
width: 100%;
table-layout: fixed;
}
.inner_table table tr td {
padding: 5px;
border: 1px solid #eee;
border: 1px solid #54769a;
/*width: 100px;*/
word-wrap: break-word;
background-color: white;
}
.inner_table table tr td a{
display:block;
}
.inner_table table{
margin-right: 0;
}
.wrap table.head tr th {
color:white;
padding: 5px;
background-color: #8CB1DA;
}
.inner_table {
height: 100px;
overflow-y: auto;
margin: 0;
padding: 0;
}