SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    .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.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2009
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •