Display:table-row and padding

I’m attempting to build a neat and tidy mechanism for displaying a set of input forms. All going well, except that I’m struggling a little with the row spacing. This is my CSS for the table-row:

.DPformRow
{
	display: table-row;
	padding-bottom: 10px;
}

I can see that the style is being applied as expected, but the padding is being ignored. If I remove the “display: table-row”, then the padding appears as expected.

I’m seeing the same behaviour in IE8 and Firefox which leads me to believe that it is as expected. So, two questions:

  • What am I missing about using padding with table-row?
  • Assuming padding isn’t going to work, what’s the best way to get some white space after the row?

Adding the space to the “row” rather than the “cells” seems to be the right way to go, as I want to vertically separate the rows and therefore, by implication, the cells.

Thanks. Nick.

A table can have padding, and table cells can have padding. But no other internal table objects may have padding.

See Table formatting in the SitePoint CSS Reference for further details.

In this case perhaps you need to use border-collapse:separate for the table object and then use border-spacing to control the distance between cells.

Tommy,

Thanks for the pointers. The border-collapse and border-spacing has worked for me.

I had started to explore adding padding to the table-cell elements, and had found that doesn’t work nicely where the element is an “input” - the padding area picks up the colour from the input area and looks horrible. That was pushing me down the line of wrapping the inputs in spans and CSSing the spans - YUK !

Looking “upwards” to the table element had not occurred to me at all.

So, again, thanks for the prompt response and for making it easy!!

Nick