Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,172
    Thanks
    19
    Thanked 65 Times in 64 Posts

    display:table-cell and border-spacing

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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    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.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by NancyJ View Post
    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:

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

    Code:
    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; }
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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