CSS Cell Margin

Question

In my HTML document, I have a table with two columns and multiple rows. How can I increase the space in between the first and second column with css? I've tried applying "margin-right: 10px;" to each of the cells on the left hand side, but to no effect.

Answer 1

Try padding-right. You're not allowed to put margins between cells.

<table>
 <tr>
  <td style="padding-right:10px">one</td>
  <td>two</td>
 </tr>
</table>

Answer 2

apply this to your FIRST < td>

padding-right:10px;

more code:

<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>

Answer 3

You can't single out individual columns in a cell in that manner. In my opinion, your best option is to add a style='padding-left:10px' on the second column and apply the styles on an internal div or element. This way you can achieve the illusion of a greater space.

Answer 4

I realize this is quite belated, but for the record, you can also use CSS selectors to do this (eliminating the need for inline styles.) This CSS applies padding to the first column of every row:

table > tr > td:first-child { padding-right:10px }

And this would be your HTML, sans CSS!:

<table><tr><td>data</td><td>more data</td></tr></table>

This allows for much more elegant markup, especially in cases where you need to do lots of specific formatting with CSS.

Answer 5

A word of warning: though padding-right might solve your particular [visual] problem, it is not the right way to add spacing between table cells. What padding-right does for a cell is similar to what it does for most other elements: it adds space within the cell. If the cells do not have a border or background colour or something else that gives the game away, this can mimic the effect of setting the space between the cells, but not otherwise.

As someone noted, margin specifications are ignored for table cells:

http://www.w3.org/TR/CSS2/tables.html

Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.

What's the "right" way then? If you are looking to replace the cellspacing attribute of the table, then border-spacing (with border-collapse disabled) is a replacement. However, if per cell "margins" are required, I am not sure how that can be correctly achieved using CSS. The only hack I can think of is to use padding as above, avoid any styling of the cells (background colours, borders, etc) and instead use container DIVs inside the cells to implement such styling.

I am not a CSS expert, so I could well be wrong in the above (which would be great to know! I too would like a table cell margin CSS solution).

Cheers!