I have a JHipster table into which I want to add vertical scroll. I tried this:
<div class="table-responsive" style="max-height: 800px;">
<table class="table">
<thead style="display:table; width: 100%; table-layout: fixed;">
<tr>
<th>ID</th>
<th class="hand">
Pair
</th>
<th class="hand">
Level
</th>
<th class="hand">
Spread
</th>
</tr>
</thead>
<tbody style="display:block; max-height: 300px; width: 100%; overflow-y: scroll;">
<tr data-cy="entityTable">
<td>267</td>
<td>test</td>
<td>silver</td>
<td>6</td>
</tr>
<tr data-cy="entityTable">
<td>268</td>
<td>test</td>
<td>gold</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
I want to have scroll only for table rows, not for head.
I tried to implement this using display:block;
but the rows are too shrinked. Is it possible to resize the table rows to fill the entire width? Any idea how I can solve this?