I'm currently working on designing an invoice table using HTML and CSS. I have dynamic rows that are added to the table, and I want the body of the table to have a minimum height to fit around 5-6 rows, after which it should extend based on the number of rows. However, I am facing difficulties in getting the last row containing the Totals to appear at the bottom of the table. Additionally, I am struggling to set the minimum height for the table body.
Below is the code snippet:
HTML
<table class="table table-bordered border-dark border-2">
<thead>
<tr>
<th scope="col">S No.</th>
<th scope="col">Name</th>
<th scope="col">HSN Code</th>
<th scope="col">Qty</th>
<th scope="col">Uom</th>
<th scope="col">Rate</th>
<th scope="col">Discount</th>
<th scope="col">Taxable Amount</th>
<th scope="col">GST %</th>
<th scope="col">IGST Amount</th>
<th scope="col">CGST Amount</th>
<th scope="col">SGST Amount</th>
</tr>
</thead>
<tbody class="item-table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<-- Dynamically entered rows -->
</tbody>
<tfoot>
<tr class="fw-bold">
<td></td>
<td>Total</td>
<td></td>
<td>Total Qty</td>
<td></td>
<td></td>
<td>Total Discount</td>
<td>Total Amount</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
This is how I would like the output to look like: https://i.sstatic.net/2YWfs.png