Question

I have a table which looks like this (in html):

<div id="product_grid_one">
  <table>
    <tr>
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
      <td>
        <div class="productimage"><img src="images/perfume.jpg" alt="Product Image" /></div>
        <div class="productdescription"><p>Perfume spray bottle</p></div>
        <div class="productprice"><p>$4.99</p></div>
      </td>                
    </tr>              
  </table>
</div>

And here is the CSS for it:

td { width: px; padding: 14px; border: 1px solid #c0c0c0; margin: 14px; }

Basically there is one row with four cells. Each cell has a vertically stacked image,
text description of the product, and product price. Now, around this three-piece stack
I want my td element (which I presume can be treated as a block), to have a padding of
14px, which I can set no problem, so that there is a 1px border 14px away from the
stack of image, text, and price. No problem till here.

The problem is that in the above, the margin is not being set!!@

I could set margin: 200px; and there still would be no difference, the margin is
about 1 or 2 pixels and does not seem to be possible to change this. And I have
tried this on Firefox 13.0.1.

So, how do I set the margin? I would like there to be 14 px between each td in the table.

Can this be attained with CSS?

---

It has been suggested to use the cellspacing attribute of tables. So I could
make use of the following equivalent CSS:

table { border-collapse: separate; border-spacing: 14px; }

but this is no good to me as I want the border-spacing applied only inside the
table. I do not want any spacing on either side (left or right) of the table as
a whole. Any solutions?

---

Well, I was able to reach a solution at last. I managed to resolve the issue
with a negative margin so that the border spacing which the table adds around
the table (in addition to in between the various table data and table headers)
does not become visible as it moved out of the way to the left by making use
of the left margin with the negative value.

table { border-collapse: separate; border-spacing: 13px; margin-left: -13px; }

Answer 1

Could you check if

.style { border-spacing: 0px; }

produces any difference? When the dinosaurs walked the Earth, they used

<td cellspacing="0">

but if you do so today, somebody of your colleagues will slap you silly. And if they do, they will probably give you the link to some list of deprecated stuff.