表格中TD之间的空格

Question

我的TR之间是否有间距可以作为下面的示例

PLUNKER

<tr class="foo">
    <td>
        <div>
            <p>
            <span class="departureTime">03h00</span>
             <span>New-York</span>
            </p>
             <p class="espacement_important">
                <span class="arrivalTime">15h00</span>
                <span>Bahamas</span>
            </p>

            <p class="duration espacement_important"><span >8h00</span>
                <span>2 correspond.</span>
                <span>A380</span>
            </p>
          </div>
        </td>
      <td class="unavailable">indisponible</td>

    <td><input type="radio" />
        <label >10.00 €</label>
    </td>
    <td><input type="radio" />
        <label >50.00 €</label>
    </td>
</tr>

Answer 1

尝试使用表格的边框间距

table {
    border-collapse: separate;
    border-spacing: 10px 50px;
}

不幸的是，根据我的经验，表格中的间距非常不灵活，所以你应该避免使用表格进行布局（以及其他原因）

Answer 2

DIV元素更适合这种显示。 如果你真的想使用表格，只需在Firefox中显示你想要的内容，并使用Firebug来检查哪些css样式应用于你感兴趣的TR元素。

Answer 3

有很多方法可以实现这个目标

＆＃13;

＆＃13;

table {
  border: none;
  border-collapse: #EEEEEE;
  }

tr {
  border: solid 1px #5E6977;
  display: block;
  margin-bottom: 10px;
  min-height: 60px;
  width: 500px;
  padding: 5px;
  }

tr.no-border  {
  border: none;
  border-bottom: solid 1px #5E6977; 
  }

th {
  line-height: 60px;
  border: none;
  width:  160px;
  }


td {
  border: none;
  border-right: solid 1px #5E6977;
  width: 160px;
  height: 60px;
  }

td:last-of-type {
  border-right: none;
}

＆＃13;

<table width="200" border="1">
  <tbody>
     <tr class="no-border">
    <th>Month</th>
    <th>Savings</th>
       <th>Savings</th>
  </tr>
    
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
     
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;