Question

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

tr之间的空间太大了。我已经完成了减少顶部和底部边距但是有一个行重叠的点。

有人有任何建议吗？

e.g。

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

Answer 1

从cellspacing="10px"移除<table>并仅使用CSS。您已经使用border-spacing: 10px;对其进行了定义。

如何减少tr之间的空间？

1 个答案: