...

View Full Version : display:table-cell and border-spacing



NancyJ
01-28-2012, 12:06 PM
I've been playing around with display:table-cell and its working really well except for one thing, I want my interior cells to have some spacing and I achieved that by adding border-spacing

eg


.table{display:table;border-spacing:20px;width:100%}
.table_cell{display:table-cell}


That works fine but it also puts a 20px space around the inside edge of the 'table'. Is there anyway to make the spacing only between interior cells and not between the cells and the edge of the table?

VIPStephan
01-28-2012, 08:17 PM
I haven’t worked with border spacing very much due to compatibility issues in the past but you may wanna try it in combination with :first-child and :last-child. The border-spacing property can have two values, by the way, one for left and right and one for top and bottom.

Arbitrator
01-29-2012, 12:00 PM
Is there anyway to make the spacing only between interior cells and not between the cells and the edge of the table?Negative.

You may be able to simulate the effect of border-spacing if your cells don't have borders by using a transparent border on all cells' sides except the sides that touch the edge of the table though. Assuming one row group, you'd use code like:


tr > * { border: solid transparent; border-top-width: 1em; border-left-width: 1em; }
tr:first-child > * { border-top-width: 0; }
tr > :first-child { border-left-width: 0; }

If your cells do have borders, you'd either have to resort to the border-image property or use the above in tandem with table-cell child elements that take the borders for the cells:


tr > * { border: solid transparent; border-top-width: 1em; border-left-width: 1em; }
tr:first-child > * { border-top-width: 0; }
tr > :first-child { border-left-width: 0; }
tr > * > div { width: 100%; height: 100%; border: 1em solid; }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum