SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    removing Table cell spacing around edge cells

    I am looking for a way tor remove the spacing between the TABLE and its cells but NOT between two cells? Is this possible. Table elements are hard to style because cells and rows do not have a margin property and .. and the cell-spacing property seems kinda heavy handed.

    padding the cells is not the answer because it works WITHIN the CELL and its border.

    Barring that solution would there be a way to make a table SHRINK just the amount of the cell-spacing?

  2. #2
    SitePoint Member redmaniack's Avatar
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by dresden_phoenix View Post
    I am looking for a way tor remove the spacing between the TABLE and its cells but NOT between two cells? Is this possible. Table elements are hard to style because cells and rows do not have a margin property and .. and the cell-spacing property seems kinda heavy handed.

    padding the cells is not the answer because it works WITHIN the CELL and its border.

    Barring that solution would there be a way to make a table SHRINK just the amount of the cell-spacing?
    Hi Dresden, for your table problem use "table{border-collapse: collapse}" and that space will be gone.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Hi, Red.

    Welcome to site point and thanks for choosing to help on your first post no less! Still, I dont think my question was clear. border-collapse: collapse eliminates ALL space between cells, so essentially the borders touch. I don't want that to happen, as I have styled the borders of the table-cells. So I set border-collapse:separate; and lets say, for the sake of example border-spacing:15px;

    now the table cell's borders are 15px away from each other, which is good.. but the table cells that are at the edge of the table are also 15px from what the table border... which is not what I want. Plus it seems a bit redundant if there is no way to correct this. I mean if you think about it if you wanted the edge table cells separated from the edge of the table you could apply padding to the table .... so why isnt there a way to separate table cells from each other but NOT from the edge of the table?

  4. #4
    SitePoint Member redmaniack's Avatar
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by dresden_phoenix View Post
    Hi, Red.

    Welcome to site point and thanks for choosing to help on your first post no less! Still, I dont think my question was clear. border-collapse: collapse eliminates ALL space between cells, so essentially the borders touch. I don't want that to happen, as I have styled the borders of the table-cells. So I set border-collapse:separate; and lets say, for the sake of example border-spacing:15px;

    now the table cell's borders are 15px away from each other, which is good.. but the table cells that are at the edge of the table are also 15px from what the table border... which is not what I want. Plus it seems a bit redundant if there is no way to correct this. I mean if you think about it if you wanted the edge table cells separated from the edge of the table you could apply padding to the table .... so why isnt there a way to separate table cells from each other but NOT from the edge of the table?
    Hi again and thanks, I'm happy to be here.

    Regarding your problem, I would recommend you choose the border-collapse:collapse solution and for separating two side by side cells for example you could do:

    #cell1{ padding-right: 10px; }
    #cell2{ padding-left: 10px; }


    This way you will achieve a 20px spacing between your two cells. Hope this helps you!

    PS. Please not padding for a table is not effective.

    Best!

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    That doesn't really separate the cells tho ( remember each table cell has a border effect applied to it already.

  6. #6
    SitePoint Member redmaniack's Avatar
    Join Date
    Oct 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    That doesn't really separate the cells tho ( remember each table cell has a border effect applied to it already.
    Perhaps a detailed example would be helpful.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You'll want the other CSS properties, like padding and border-spacing, which have replaced the old cellpadding/cellspacing HTML attributes.

    http://www.w3.org/TR/CSS21/tables.html#borders

    So I think you're looking for border-spacing in particular, which I believe needs border-collapse to be "separate". Not sure how IE support is, but they do work on elements with display: table-whatever for those browsers who support that : )

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I made a quick sketch of what I want and what I am getting. For the sake of example:

    BLACK= is the table, border table{border...}
    GRAY =is the table background, table{background:...}
    in reality there is no table border or background color.. but I so you can see what I mean I illustrate it as if there was.

    ORANGE= is the styled table-cell border ,TD{border:....; border-radius:...; border-image:...; and whatnot}

    BLUE= is the cable content and padding, TD{padding:...} <TD>blah content blah</TD>


    This is what I am trying to do....



    but this is what using border-collapse:separate gives me...:

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure if tables are what you're looking for. floated or inline-block <div>s sounds better.

    anyway, if you still want tables, here's an example... of how not to do it

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr"><head>
    
      <meta	http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta	http-equiv="Content-Language" content="en">
    
      <style type="text/css">
        
        table { border: solid 1px; padding:0; }
        table td { border: none 0; padding:0; }
        table table { border: none 0; }
        table table td { border: solid 1px; height: 100px; width: 100px; }
        .spacer { border: none 0; height: 20px; width: 20px; }
        
      </style>
    
    </head><body>
    
      <table cellspacing="0">
        <tr>
          <td>
            <table>
              <tr>
                <td></td>
                <td class="spacer"></td>
                <td></td>
                <td class="spacer"></td>
                <td></td>
                <td class="spacer"></td>
                <td></td>
              </tr>
              <tr>
                <td class="spacer" colspan="4"></td>
              </tr>
              <tr>
                <td></td>
                <td class="spacer"></td>
                <td></td>
                <td class="spacer"></td>
                <td></td>
                <td class="spacer"></td>
                <td></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      
    </body></html>
    i assumed you only want tables. you could, however, replace the outer table with a div. nested tables are always bad news.

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    noonnope,
    I was thinking that would be something I would have to do, but was concerned about having the extra markup ( empty table cell) not being very semantic friendly...

  11. #11
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that's why i suggested <div>s instead

    inline-blocks i think would fit your purpose. at least from the drawing you provided.

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    but they would not be equal height

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This works everywhere except IE6 but needs an extra element.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
        float:left;
        position:relative;
        margin:50px;
    }
    table {
        border-spacing:10px;
        width:300px;
        position:relative;
    }
    td {
        border:2px solid red;
    }
    .wrap p {
        position:absolute;
        left:5px;
        right:5px;
        top:5px;
        bottom:5px;
        border:5px solid blue;
        margin:0;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
        <table cellspacing="10">
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
        </table>
    <p></p>
    </div>
    </body>
    </html>
    Or if you just want Firefox and Opera support (not safari or iE) you can use less elements.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .wrap {
        float:left;
        position:relative;
        margin:50px;
    }
    table {
        border-spacing:10px;
        width:300px;
        position:relative;
    }
    td {
        border:2px solid red;
    }
    table:after {
        content:"";
        position:absolute;
        left:5px;
        right:5px;
        top:5px;
        bottom:15px;
        border:5px solid blue;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
        <table>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
        </table>
    </div>
    </body>
    </html>

  14. #14
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or you could try this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en" dir="ltr"><head>
    
      <meta	http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta	http-equiv="Content-Language" content="en">
    
      <style type="text/css">  
       
        .container {
          display:inline-block;
          border:1px solid red;
          padding:4px;
        }
        
        .row {
          display:table-row;
        }
       
       .row div {
          display:inline-block;
          float:left;
          background:#def;
          border:1px solid red;
          margin:0 50px 50px 0;
          height:100px;
          width:100px;
        }
        
        .row .last {
          margin-right:0;
        }
        
        .last.row div {
          margin-bottom:0;
        }
      </style>
    
    </head><body>
    
      <div class="container">
        <div class="row">
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div class="last">
          </div>
        </div>
        
        <div class="last row">
          <div>
          </div>
          <div>
          </div>
          <div>
          </div>
          <div class="last">
          </div>
        </div>
      </div>
      
    </body></html>
    for ie6-7 hacks are needed.

    the example assumes you work with fixed height and width for the "table cell" <div>s.

  15. #15
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OK.. I kinda experimented with both approaches ( the div and the wrap idea), then took took a little detour , added overflow: hidden, and came up with this...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    
    <style>
    	body{min-width:900px; padding:0; margin:0; }/* this is to accomodate for the box shadow*/
    	.tablef, .table2f{ width:100%;  background:#ccc; display:table}
    	.table3f{ width:920px;  background:yellow; display:table; border-spacing: 10px 0; border-collapse:separate; margin-left:-20px  }
    	
    	.tablef .cell{ border:12px solid  #000; padding:0; display:table-cell; background:orange;  width:33.33%; 
    	
    		-moz-border-radius:10px;
    		-webkit-border-radius:10px;
    		 border-radius:10px;
    		-moz-box-shadow:1px 1px 1px #000; 
    		-webkit-box-shadow:1px 1px 1px #000; 
    		 box-shadow:1px 1px 1px #000;
    	}
    	.spacer{padding-left:10px; display:table-cell;}
    	.r {min-height:200px; background:brown;  width:900px; margin:0 auto;}
    	.m {width:880px; margin:0 auto; padding:0 10px; overflow:hidden}
    	
    	.table2f .cell{ border:20px solid  #000; padding:0; display:table-cell; background:orange;  width:33.33%; 
    		-moz-border-image: url(" border.png") 20;
    		-webkit-border-image: url(" border.png") 20;
    		border-image: url(" border.png") 20;
    	}
    	.table3f .cell{   border:20px solid  #000; padding:0; display:table-cell; background:orange;  width:33.33%; 
    		-moz-border-image: url(" border.png") 20;
    		-webkit-border-image: url(" border.png") 20;
    		border-image: url(" border.png") 20;
    	}
    
    </style>
    </head>
    
    <body>
    <div class="tablef">
     	<div class="cell">
            this is a cell -div
         </div><div class="spacer"></div>
     	<div class="cell">
            this is a cell -div<br> and something to make one cell taller and wider
         </div><div class="spacer"></div>
     	<div class="cell">
            this is a cell -div
         </div>
     </div>
     <div class="table2f">
     	<div class="cell">
            this is a cell -div
         </div><div class="spacer"></div>
     	<div class="cell">
            this is a cell -div<br> and something to make one cell taller and wider. The apparent "padding" on this  row comes from  the 20px corner on the border-image attribute
         </div><div class="spacer"></div>
     	<div class="cell">
            this is a cell -div
         </div>
     </div>
    
     <p class="r">900px cenetered block element</p>
     <div class="m">
          <div class="table3f">
              <div class="cell">
                 this is a cell -div
              </div> 
              <div class="cell">
                 this is a cell -div<br> and something to make one cell taller and wider. The apparent "padding" on this  row comes from  the 20px corner on the border-image attribute
              </div> 
              <div class="cell">
                 this is a cell -div
              </div>
          </div>
     </div>
    
    </body>
    </html>
    It seems to work.. thanks all!!!


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
  •