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

101,303

Solution 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.

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

Solution 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;
}
Share:
101,303
jeffkee
Author by

jeffkee

Jeff Kee is the CEO &amp; Director of [Brixwork Real Estate Marketing Inc.][2] Some of my most prized projects: West Vancouver Real Estate with Brock Smeaton Vancouver Condos and Townhomes with Condo Leo Whistler Real Estate with Denise Brown Luxury Real Estate Marketing with DJ Denner Burnaby, East Vancouver and Metro Vancouver Real Estate with Steven Almeida

Updated on February 01, 2021

Comments

  • jeffkee
    jeffkee over 3 years

    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>