CODEWITHSUNDEEP
htmlcss
Amra
Amra

Reputation: 25180

Add space between cells (td) using css

I am trying to add a table with space between cell as the background colour of the cell is white and the background color of the table is blue, you can easily see that padding and margin are not working (I am applying it to the td), it will only add space inside of the cell.

Upvotes: 96

Views: 261884

Answers (7)

obliviJohn
obliviJohn

Reputation: 11

If you want separate values for sides and top-bottom.

<table style="border-spacing: 5px 10px;">

Upvotes: 0

Ram
Ram

Reputation: 125

Suppose cellspcing / cellpadding / border-spacing property did not worked, you can use the code as follow.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

I've tried and got succeed while seperate the button by using table-width and make an empty td as 2 or 1% it doesn't return more different.

Upvotes: 3

JanBorup
JanBorup

Reputation: 5615

Mine is:

border-spacing: 10px;
border-collapse: separate;

Upvotes: 34

Kelly
Kelly

Reputation: 439

table { 
  border-spacing: 10px; 
}

This worked for me once I removed 

border-collapse: separate;

from my table tag.

Upvotes: 43

SF.
SF.

Reputation: 14029

cellspacing (distance between cells) parameter of the TABLE tag is precisely what you want. The disadvantage is it's one value, used both for x and y, you can't choose different spacing or padding vertically/horizontally. There is a CSS property too, but it's not widely supported.

Upvotes: 4

Kniganapolke
Kniganapolke

Reputation: 5393

Consider using cellspacing and cellpadding attributes for table tag or border-spacing css property.

Upvotes: 4

Dominic Rodger
Dominic Rodger

Reputation: 99751

You want border-spacing:

<table style="border-spacing: 10px;">

Or in a CSS block somewhere:

table {
  border-spacing: 10px;
}

See quirksmode on border-spacing. Be aware that border-spacing does not work on IE7 and below.

Upvotes: 130

Related Questions