调整HTML表格行之间的间距

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

{block name=head}
运输署{
边界：无；
字体大小：粗体；
字体大小：100%；
}
.h1{
利润率：3px，0px；
}
.内容{
高度：270px；
边框：1px纯黑；
字体大小：100%；
宽度：80%；
保证金：0自动；
边界顶部：无；
字体系列：时代新罗马；
}
.页脚{
高度：30px；
边框：1px纯黑；
宽度：80%；
保证金：0自动；
字体系列：终端；
}
.详情表{
边界塌陷：塌陷；
}
.详情表td{
边框底部：1px实心#666；
填充物：5px；
右边框：1px实心#666；
}
.详情表td.no-右边框{
边界权：无；
}
.详情表td.no-底边{
边框底部：无；
}   
{/block}
{block name=body}
名称：{$partyName}
日期：{$salesDate}
精细：{$totFine |字符串_格式：“%.3f”}
项目
粗俗的
较少的
网
触碰
损耗
好的
{section name=“sec”循环=$dtArray}
{$dtArray[sec].itemId}
{$hsnCode}
{$fine}
{$rate}
{$amount |字符串_格式：“%.2f”}
{$amount |字符串_格式：“%.2f”}
{$amount |字符串_格式：“%.2f”}
{/section}
{/block}

您在

上设置了

高度：270px

，在

上设置了

height=“100%”

，并且表是该div的直接子级，因此它继承了高度。这就是为什么当只有几行的时候你会看到额外的空间。只需重置或删除其中一个高度值即可解决此问题

编辑

在另一种情况下，如果希望保留表上设置的高度，并且只在底部显示空白，则可以添加一个空行，并将其设置为

高度：100%

。详细信息表{
高度：270px；
宽度：80%；
保证金：0自动；
边界塌陷：塌陷；
}
.详情表td{
边框：1px实心#666；
填充物：5px；
}

项目
粗俗的
较少的
网
触碰
损耗
好的
...
...
...
...
...
...
...

{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}