Cannot put margin on <td> tag with neither CSS nor cellspacing attribute

Question

For whatever reason, I have been unable to get any table cells to have margin between them. I want the table cells to have a grey background colour (over a white page background) so it looks like tiles with white between them.

I tried in the HTML,

<table cellspacing="3">

Also in the CSS,

table td {
    margin:3px;
}

Nothing works. The cells are still stuck together, like one big grey blob. Am I missing something very very basic here?

Here's the actual code:

<table width="100%" cellspacing="3">
    <tr>
        <th>Document Number</th>
        <th>BP Reference No.</th>
        <th>Posting Date</th>
        <th>Posting Week</th>
        <th>Customer/Vendor Code</th>
        <th>Customer/Vendor Name</th>
        <th>Item No.</th>
        <th>Item/Service Description</th>
        <th>Item Group</th>
        <th>Warehouse Code</th>
        <th>Remaining Open Quantity</th>
        <th>Line No.</th>
        <th>Sales Employee Name</th>
        <th>Stock</th>
        <th>Fill Rate</th>
        <th>1046</th>
        <th>1047</th>
        <th>1048</th>
        <th>1049</th>
        <th>1050</th>
        <th>1051</th>
        <th>1052</th>
        <th>1053</th>
        <th>1054</th>
        <th></th>
    </tr>
    <tr>
        <td>17272</td>
        <td>2244100</td>
        <td>5/24/2010</td>
        <td>22</td>
        <td>NYST</td>
        <td>NYSTROM INC.</td>
        <td>NYM118SX26DSTKS01</td>
        <td>Nystrom, Mort. 1-1/8'', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
        <td>Mort Cylinders</td>
        <td>US1</td>
        <td>1000</td>
        <td>3</td>
        <td>KRE Management 1</td>
        <td>0</td>
        <td>100</td>
        <td>1000</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td></td>
    </tr>
</table>

Continuance

Answer 1

If someone still has this problem, try this in your CSS stylesheet:

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

The values for border-spacing are two length measurements. The horizontal value comes first and applies between columns. The second measurement is applied between rows.

If you provide one value, it will be used both horizontally and vertically. The default setting is 0, causing the borders to double up on the inside grid of the table.

Witless

Find out more about border-collapse: separate css-tricks.com/almanac/properties/b/border-collapse – Trapezohedron

Answer 2

If you're using a CSS reset at the beginning of your stylesheet, check to see if it has the following code.

table {
  border-collapse: collapse;
}

If that's the case, try overriding it with:

border-collapse: separate;

Elouise

The 960 grid might be doing it... let me try it. – Continuance

I confirmed through Firebug that the collapse was in fact part of the CSS reset, and my override had also worked to set it to "separate" and I still can't see any margin. – Continuance

@jeffkee, you won't see any margin until you set BOTH border-collapse: separate and border-spacing to 1px or more. – Tellford

Answer 3

make style td with block. Try this,

<table width="100%" border="0" cellpadding="2" cellspacing="1">
  <tbody>
    <tr>
      <td class="SlateGridDataError">Please Re-enter login information</td>
    </tr>
  </tbody>
</table>

.SlateGridDataError {
    border-radius: 2px;
    display: block;
    font-size: 14px;
    color: #999999;
    display:block;
    border: 1px solid #dd3c39;
    border-left: 5px solid #dd3c39;
    padding: 12px 5px;
    margin-bottom: 20px;
    cursor: default;
    outline: none;
}

Lolalolande

Answer 4

I think cellspacing takes the color same as the table's background color.
So you have two options:
1. Apply the background color to the tds rather than the <table> itself.
2. You might want to use a white border (border for <td> with a border-collapse: collapse for the table)

Chiquita

I already have the bg colour applied to the td, not table. However I will try your option of using white borders. – Continuance

Answer 5

Try adding a td between the two TDs you want to have the margin. Set it to have no background (just don't put "background:something;") and to have the width you want. If you want to put a margin between two TRs, just add another tr between them and put a td with the height you want the margin to have. You can even use the same class for the TDs and set the CSS only once.

Chronometer

Please an example would be a great help – Encyclopedia

Adding extra empty HTML tags to solve a CSS-related issue? 👎🏾 – Barcellona

Answer 6

So i figured out a simple way off solving the problem without any problem

let's say you have

<tr><td>This is an example</td></tr>

Put encapsulate the whole data in a

tag like this

<tr><td><p>This is an example</p></td></tr>

and then give the

tag a margin-left of any value you want, let's say

<tr><td><p style="margin-left:4px;">This is an example</p></td></tr>

It does the magic for me without any hassle

Immixture

That would be the equivalent of putting padding on the element, not margin, as requested. – Wapiti

Answer 7

This is a crude fix, but it works.

If you create a <table> with a margin of the size you want ..containing your existing , both using the same background or color you can set the margin of the outer table to be what you want.

If you have a series of <TD> elements, create a <table> inside the <TD> that you want to have a margin and again be sure that both the outer <table> and inner <TD> have the same background or color.

example from my blog at http://harrolds.blogspot.com which embeds a script to display quotations...

Main table:

<table width="100%" bgcolor="lightblue" border=1>
<tbody>
  <tr>
    <td align="left" width="160"><span style="font-family:Times New Roman;font-size: -1;"><small><a href="http://en.wikipedia.org/wiki/Zell_Miller" target="_new">Sen. Zell Miller</a> <small>(D-GA) RNC'04</small></small></span><br /><object width="120" height="106"><param name="movie" value="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&amp;hl=en&amp;fs=1&amp;border=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="120" height="106"></embed></object><br /><font size="-1"><span style="color: blue; font-family: "sylfaen";><a href="http://www.harrold.org/rfhextra/support_our_Troops.html" target="_new"><b><small>Liberators &amp; Defenders</small></b></a></span></font> 
    </td>

    <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg">
      <table border=0>
        <tr>
          <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg"><script language="javascript" src="http://www.harrold.org/rfhextra/quote.js" type="text/javascript"></script>
          </td>
        </tr>
      </table>
    </td>

    <td align="right"><a href="http://www.cafepress.com/rightwingstuff" target="_new"><small><small>RightWingStuff</small></small></a><br /><a href="http://www.gadsdenandculpeper.com/" target="_new"><img src="http://harrold.org/rfhextra/images/GadsdenFlag98x130.gif" width="98" height="130" alt="link source  http://www.cafepress.com/rightwingstuff" border="0" /></a>
    </td>
  </tr>
</tbody>
</table>

Packthread

OT: The question is about CSS or table attributes. Usage of a new table for formating a rectagle is not only deprecated but deterrent – Braiding

Believe it not, this is the solution that helped me for my case. – Britska