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

К сожалению, расстояние в таблице s довольно негибкие по моему опыту, поэтому вам следует избегать использования таблиц для макетов (среди прочих причин

Answer 2

Элементы DIV были бы более подходящими для такого дисплея. Если вы действительно хотите использовать таблицы, просто покажите, что вы хотите в Firefox, и используйте Firebug, чтобы проверить, какие стили CSS применяются к интересующим вас элементам TR.

Answer 3

Есть так много способов для достижения этой цели

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>