CODEWITHSUNDEEP
htmlcss
Mercer
Mercer

Reputation: 9996

Space betwen TD in a table

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

enter image description here

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>

Upvotes: 0

Views: 211

Answers (3)

Vall3y
Vall3y

Reputation: 1181

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)

Upvotes: 3

Sleek Geek
Sleek Geek

Reputation: 4686

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>

Upvotes: 1

Anthed
Anthed

Reputation: 149

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.

Upvotes: 1

Related Questions