如何缩小间距？

我试图复制我已经给出的一个页面，而且我已经快完成了，但是我遇到了一个小问题。如何缩小间距？

tr之间的距离太大。我已经做到了减少边界的顶部和底部，但有一个点重叠行。

有没有人有任何建议？

例如

<style type="text/css"> 
.divContainer 
{ 
margin:10px; 
background-color:#C7D8EE; 
border:2px solid #0076BF; 
text-align:left;  
} 

.tableContainer 
{ 
color:#0076BF; 
margin: -10px 0px -10px 0px; 
border-spacing: 10px; 
empty-cells:show; 
width:90%; 

} 
.tableContainer tr td{ 
white-space:nowrap; 
} 

.tableContainerRow2{ 
background-color:white; 
border:2px solid #0076BF; 

} 
</style> 
    <div class="divContainer"> 
     <table class="tableContainer" cellspacing="10px"> 
      <tr> 
       <td>NHS Number</td> 
       <td>&#160;</td> 
       <td>Date of Visit</td> 
       <td>&#160;</td> 
       <td colspan="3">Care Time Started</td> 
       <td>&#160;</td> 
       <td>&#160;</td> 
       <td rowspan="2" style="font-weight:bold;vertical-align:middle;">Tick when<br/> care starts</td> 
      </tr> 
      <tr > 
       <td width="90" class="tableContainerRow2">&#160;</td> 
       <td >&#160;</td> 
       <td width="80" class="tableContainerRow2">&#160;12/12/09</td> 
       <td >&#160;</td> 
       <td width="40" class="tableContainerRow2">&#160;12</td> 
       <td width="5">:</td> 
       <td width="40" class="tableContainerRow2">&#160;10</td>       
       <td >&#160;</td> 
       <td style="text-align:right" >&#160;&#9745;</td> 
      </tr> 
     </table> 
     <table class="tableContainer" cellspacing="10px" > 
      <tr> 
       <td></td> 
       <td>Initials</td> 
       <td>Surname</td> 
      </tr> 
      <tr> 
       <td width="80" style="font-weight:bold;">Midwife</td> 
       <td width="50" class="tableContainerRow2">&#160;</td> 
       <td class="tableContainerRow2">&#160;</td> 
      </tr> 
      <tr> 
       <td></td> 
       <td>Initials</td> 
       <td>Surname</td> 
      </tr> 
      <tr> 
       <td style="font-weight:bold;">Doctor</td> 
       <td class="tableContainerRow2">&#160;</td> 
       <td class="tableContainerRow2">&#160;</td> 
      </tr> 
     </table> 
     <table class="tableContainer" cellspacing="10px" > 
      <tr> 
      <td width="250">Forename</td> 
      <td>Surname</td> 
     </tr> 
      <tr> 
      <td class="tableContainerRow2">&#160;</td> 
      <td class="tableContainerRow2">&#160;</td> 
     </tr> 
    </table> 
    <table class="tableContainer" cellspacing="10px" > 
     <tr> 
      <td width="90">Date of Birth</td> 
      <td width="150"></td> 
      <td width="100">Casenote No:</td> 
      <td></td> 
     </tr> 
     <tr> 
      <td class="tableContainerRow2">&#160;</td> 
      <td></td> 
      <td class="tableContainerRow2">&#160;</td> 
      <td></td> 
      </tr> 
    </table> 
</div>

来源

2010-01-18 Amra

取下<table>cellspacing="10px"而只使用CSS。您已经用border-spacing: 10px;定义了它。

来源

2010-01-18 13:09:20 BalusC

嗨，感谢您的建议，我想澄清我定义两次的原因是因为IE显然不支持边界间距（我被告知），所以我不得不添加cellspacing使它跨浏览器兼容。纠正我，如果我错了。 – Amra 2010-01-18 13:13:23

除了'border-spacing'外，你还可以在'table'元素的'td'元素**和**'border-collapse：collapse'上使用不可见的'border'。 – BalusC 2010-01-18 13:19:36

如何缩小间距？

回答

相关问题