Controlling Spacing Between Table Cells

html css css-tables
Jonathan Wood picture Jonathan Wood · Sep 25, 2012 · Viewed 154k times · Source

I'm trying to create a table where each cell has a background color with white space between them. But I seem to be having trouble doing this.

I tried setting td margins but it seems to have no effect.

table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}​

If I do the same thing with padding, it works, but then I don't have the spacing between cells.

Could someone help me with this?

jsFiddle: http://jsfiddle.net/BfBSM/

Answer

Quentin picture Quentin · Sep 25, 2012

Use the border-spacing property on the table element to set the spacing between cells.

Make sure border-collapse is set to separate (or there will be a single border between each cell instead of a separate border around each one that can have spacing between them).

Related questions

CSS Cell Margin

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 …

Read More
What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?

In Visual Studio, I'm seeing these warnings: Validation (HTML 5): Attribute 'cellpadding' is not a valid attribute of element 'table'. Validation (HTML 5): Attribute 'cellspacing' is not a valid attribute of element 'table'. Validation (HTML 5): Attribute 'valign' is not a valid attribute …

Read More
Border around specific rows in a table?

I'm trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I'm not really supposed to use tables for layout but I don't know enough CSS to completely replace it …

Read More