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

あなたは<div class="content">上height:270pxセット、および<table>上height="100%"セット、およびテーブルを持って、そのdiv要素の直接の子であるので、高さを継承します。そのため、2行しかないときに余分なスペースが見えてきます。高さの値をリセットまたは削除するだけで修正できます。他の場合には

EDIT

あなたがテーブルの上にセット高さを維持し、底部のみに表示するように空きスペースを持つようにしたい場合は、あなたは空の行を追加し、それを設定することができます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>