Currently, I am working on incorporating a table into my webpage that will load data from an API. After some research, I found a Bootstrap table library to assist with this task. However, I have encountered an issue with setting the table height dynamically based on the amount of data retrieved from the API. As it stands, my table contains several cells with empty space underneath them. I apologize if my explanation is not clear enough; perhaps a screenshot would better illustrate the problem.
Here is the code I am using:
HTML
<table id="table"
class="table table-responsive table-striped"
style="background: whitesmoke;">
<thead>
<tr>
<th data-field="firstname" data-sortable="true">First Name</th>
<th data-field="lastname" data-sortable="true">Last Name</th>
<th data-field="roomType" data-sortable="true">Room Type</th>
<th data-field="dateFrom" data-sortable="true">Start Date</th>
<th data-field="dateTo" data-sortable="true">End Date</th>
</tr>
</thead>
</table>
Javascript
$('#table').bootstrapTable({
data: reservations,
});
'reservations' is the list of data loaded from the API
Here is the result:
View how the table appears on my page
How can I adjust the table height based on the number of data entries fetched from the API?
Thanks for your assistance :)