Space betwen TD in a table

Question

Is it possible to have spacing among my TR as the example below

enter image description here

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

So you have an example... did you try to look at the source and mimick it ? — Laurent S., Jan 14 '15 at 13:00
Possible duplicate - http://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table — Luís P. A., Jan 14 '15 at 13:01
Yes, it is possible: http://plnkr.co/edit/pVZAEVUCXTOMPVHIZb7y?p=preview — Ilya Streltsyn, Jan 14 '15 at 13:05

score 3 · Accepted Answer · edited Mar 24 '19 at 14:56

3

try using border-spacing for table

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

Unfortunately spacing in tables are pretty inflexible from my experience, so you should avoid using tables for layouts (among other reasons)

edited Mar 24 '19 at 14:56

Avior

481
6
18

answered Jan 14 '15 at 13:00

Vall3y

1,181
8
18

it's ok i just use border-spacing: 0px 10px; – Mercer Jan 14 '15 at 13:05

score 1 · Answer 2 · answered Jan 14 '15 at 13:05

1

DIV elements would be more appropriate for a such display. If you really want to use tables, just display what you want in Firefox and use Firebug to check which css styles are applied to the TR elements that interest you.

answered Jan 14 '15 at 13:05

Anthed

139
1
6

Sleek Geek · Answer 3 · 2015-01-14T14:08:27.853

There are so many ways to achieve this

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>

Space betwen TD in a table

3 Answers3