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.

Solution 1

Apply this to your first <td>:

padding-right:10px;

HTML example:

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

Solution 2

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:

CSS 2.1 Specification – Tables – Visual layout of table contents

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!

Solution 3

If you can't use padding (for example you have borders in td) try this

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

Solution 4

margin does not work unfortunately on individual cells, however you could add extra columns between the two cells you want to put a space between... another option is to use a border with the same colour as the background...

Solution 5

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.

View more solutions

Comments

[Asons]

There is a good CSS solution here, newly updated: stackoverflow.com/a/21551008/2827823

[Levitikon]

This is great and all for padding, but what about for margin? I want to add space outside of the cell that contains a border. Margin CSS seems to have no affect on cells.

[ravi]

Levitikon, that's right - margins do not work for reasons above. The only way to get what you want, AFAIK, is to wrap the contents of the cell in a DIV, add the margin and border to that DIV, rather than the cell.

[Hayden Thring]

this is good, simple, and effective, thanks for reminding me +1

[Gaurav Ramanan]

You can check more about border-collapse : separate here css-tricks.com/almanac/properties/b/border-collapse

[Gaurav Ramanan]

A far better approach to it would be to use border-collapse : seperate

[Simon Robb]

This is not a good approach for separation of structure and styling. It's not a case of whether or not CSS is required - CSS should be used for something like this.

[Rune Jeppesen]

shouldn't be <td style="width:10px;"></td>

[trebor]

Remember, the simplest solutions are the best. Method with inline style is also good :)

[Necreaux]

This also worked for css tables (display:table*) made out of divs.

[Asons]

This solution is already posted, no need for 2 answers saying the same thing.

[stewbasic]

It seems like border has the same problem as padding - it adds space between the cell content and boundary, not outside the boundary.

[Tony DiNitto]

Just in case someone was copy/pasting the border-collapse technique the above comment, it should be border-collapse: separate (there was a typo in the spelling of separate above)

[Mawg says reinstate Monica]

That is masking the problem, not answering it. No one will learn how to do it properly by doing that

[Mawg says reinstate Monica]

I upvoted, but you might have explained why it is better to use %

[Muhammad Awais]

Normally % is used to make responsive.

[Asons]

I posted a CSS solution a long time ago (updated it today): stackoverflow.com/a/21551008/2827823

[Mawg says reinstate Monica]

Plus one - maybe you could edit your answer to say so? Not veryone who reads might read the comments.. If you want to add a link to something about responsive design, even better :-)

[Sølve T.]

Also, if you want to define the amount of space between the borders, you will have to use border-spacing: 5px;

[Lee Blake]

border-spacing also adds space between rows. Unfortunately, there is not a separate property for vertical and horizontal spacing.

[OldTinfoil]

border-spacing takes two arguments - one for horizontal and one for vertical.

[Linh]

It working for my specific case. Very creative. Thank you