CODEWITHSUNDEEP
htmlcsshtml-tablemargincellspacing
jeffkee
jeffkee

Reputation: 5238

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

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>

Upvotes: 40

Views: 113217

Answers (7)

Falah
Falah

Reputation: 191

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

Upvotes: 5

Sam Nabi
Sam Nabi

Reputation: 379

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;

Upvotes: 8

sebastian
sebastian

Reputation: 986

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.

Upvotes: 97

Breno
Breno

Reputation: 1

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.

Upvotes: -1

1baga
1baga

Reputation: 338

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

Upvotes: -2

rharrold
rharrold

Reputation: 5

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>

Upvotes: -3

Nivas
Nivas

Reputation: 18334

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)

Upvotes: 0

Related Questions