表中 TD 之间的空间答案

【问题标题】：Space betwen TD in a table表中 TD 之间的空间
【发布时间】：2015-03-12 16:06:20
【问题描述】：

我的TR 之间是否可以有间距，如下例所示

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

【问题讨论】：

所以你有一个例子......你有没有尝试查看源代码并模仿它？
可能重复 - stackoverflow.com/questions/351058/…
是的，有可能：plnkr.co/edit/pVZAEVUCXTOMPVHIZb7y?p=preview

标签： html css

【解决方案1】：

尝试对表格使用边框间距

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

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

【讨论】：

没关系，我只使用border-spacing: 0px 10px;

【解决方案2】：

有很多方法可以实现这一点

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

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

【讨论】：

【解决方案3】：

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

【讨论】：