Adjust spacing between HTML table rows - html

Question

I want to display records one by one in sequence, I do not know why the extra space appears between the records. Can anyone help me please?
{block name=head}
<style>
td {
border: none;
font-weight: bold;
font-size: 100%;
}
.h1 {
margin: 3px, 0px;
}
.content {
height: 270px;
border: 1px solid black;
font-size: 100%;
width: 80%;
margin: 0 auto;
border-top: none;
font-family: Times New Roman;
}
.footer {
height: 30px;
border: 1px solid black;
width: 80%;
margin: 0 auto;
font-family: Terminal;
}
.details-table {
border-collapse: collapse;
}
.details-table td {
border-bottom: 1px solid #666;
padding: 5px;
border-right: 1px solid #666;
}
.details-table td.no-right-border {
border-right: none;
}
.details-table td.no-bottom-border {
border-bottom: none;
}
</style>
{/block}
{block name=body}
<div class="footer">
<table align="center" width="80%">
<tr>
<td style="text-align:left;">Name : {$partyName}</td>
<td style="text-align:center;">Date : {$salesDate}</td>
<td style="text-align:right;">Fine : {$totFine|string_format:"%.3f"}</td>
</tr>
</table>
</div>
<div class="content">
<table align="center" width="100%" class="details-table">
<tr height="30">
<td>Item</td>
<td style="text-align:center;">Gross</td>
<td style="text-align:center;">Less</td>
<td style="text-align:center;">Net</td>
<td style="text-align:center;">Touch</td>
<td style="text-align:center;">Wastage</td>
<td style="text-align:center;">Fine</td>
</tr>
{section name="sec" loop=$dtArray}
<tr>
<td valign="top" class="no-bottom-border">{$dtArray[sec].itemId}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$hsnCode}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$fine}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$rate}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
<td valign="top" style="text-align:center;" class="no-bottom-border">{$amount|string_format:"%.2f"}</td>
</tr>
{/section}
</table>
</div>
{/block}

Answer 1

You have height:270px set on the <div class="content">, and height="100%" set on the <table>, and the table is an immediate child of that div, so it inherits the height. That's why you're seeing the extra space when there are only a couple of rows. Simply reset or remove either of the height value to fix that.
EDIT
In the other case, if you want to keep the height set on the table, and only have the empty space to display at the bottom, you can add an empty row and set it to height:100%.
.details-table {
height: 270px;
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
.details-table td {
border: 1px solid #666;
padding: 5px;
}
<table class="details-table">
<tr>
<td>Item</td>
<td>Gross</td>
<td>Less</td>
<td>Net</td>
<td>Touch</td>
<td>Wastage</td>
<td>Fine</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<!-- insert empty row -->
<tr style="height:100%;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>