调整HTML表格行之间的间距

Question

我想按顺序逐个显示记录，我不知道为什么记录之间会出现额外的空格。有人可以帮帮我吗？

{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

您height:270px设置了<div class="content">，height="100%"设置了<table>，该表是该div的直接子项，因此它继承了高度。这就是为什么当只有几行时你会看到额外的空间。只需重置或移除任何一个高度值即可解决此问题。

修改

在另一种情况下，如果要保持表格的高度设置，并且只在底部显示空白空间，则可以添加一个空行并将其设置为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>