如何减少tr之间的空间？答案

【问题标题】：How to reduce space between tr?如何减少tr之间的空间？
【发布时间】：2012-04-30 12:51:03
【问题描述】：

我正在尝试复制我收到的页面，我已经快完成了，但是我遇到了一个小问题。

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;0123456789</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>

【问题讨论】：

标签： html css alignment

【解决方案1】：

从 <table> 中删除 cellspacing="10px" 并仅使用 CSS。你已经用border-spacing: 10px;定义了它。

【讨论】：

嗨，谢谢你的建议，我想澄清一下我定义两次的原因是因为 IE 显然不支持边框间距（有人告诉我），所以我必须添加单元格间距才能做到跨浏览器兼容。如果我错了，请纠正我。
除了border-spacing，您还可以在td 元素上使用不可见的border 和在table 元素上使用border-collapse: collapse。