margin-left style not working on second <td> element

Question

A table with two cells side by side:

<table>
  <td disabled>Something Here</td>
  <td style="margin-left:100px;" disabled>Second Cell</td>    
</table>

The margin-left:100px does nothing to separate the second cell from the first cell. How do I create space to the left of the second cell?

Padding Left

padding-left:100px

Produces this result:

The content of the second cell now has 100px of space added to the left. The position of the cell background however remains unchanged.

Border-spacing

<table style="border-spacing: 100px 0; margin: 0 -100px">

Produces this result:

If I add a third table cell, I get this result:

I don't want spacing between every cell, just the second one.

Cellspacing

cellspacing in the table element creates spacing around every cell. I don't want that either, and one source states that cellspacing is not supported in HTML5.

Answer 1

Add another <td> element, set text color to same as background, and background-color to transparent, enter number of characters you want for spacing.

Illustration with background shown for display purposes:

<table>
  <td>Something Here</td>
  <td style='color:white; background-color: green'>123456</td>
  <td>Second Cell</td>
  <td>Third Cell</td>
</table>

Creates a 'Dummy Cell' with a spacing of 6 characters. Now set background to transparent.

Cell Background Set to Transparent and Text Color set to same as Parent Element.

<table>
  <td>Something Here</td>
  <td style='color:white; background-color: transparent;'>123456</td>
  <td>Second Cell</td>
  <td>Third Cell</td>
</table>

So far, my preferred method would be to simply add another <td> element for spacing. But I'm open to any better solution.

Answer 2

Margin wont work with table cells. Try padding or cellspacing="" to table.

Or add a div inside the table cell and apply margin to the div.

<td style="padding-left:100px;" disabled>Second Cell</td>  

Answer 3

According to CSS specifications, margin properties do not apply to table cells (elements with display: table-cell). It is valid to set them, but the setting has no effect.

The way to separate the cells of a table is to set border-spacing on the table element, e.g. with <table style="border-spacing: 100px 0">. However, this also sets the spacing between the cells and the edges of the table. This effect can be cleared using negative margins:

<table style="border-spacing: 100px 0; margin: 0 -100px">
  <td disabled>Something Here</td>
  <td disabled>Second Cell</td>    
</table>

Caveat: IE 7 (and older) does not support border-spacing, but it supports margin properties, so on it the result would be all wrong. If this is relevant, put the CSS code in a style element and wrap it inside a “pseudocomment” that makes IE 7 and older ignore it.

Depending on the context, the simpler method of just setting left margin on the second cell may work well. However, it creates spacing inside the second cell, not between the cells. The difference between this and cell spacing matters e.g. if cells have backgrounds or borders.