removing Table cell spacing around edge cells

[dresden_phoenix]

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?

[redmaniack]

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.

[dresden_phoenix]

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?

[redmaniack]

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!

[dresden_phoenix]

That doesn't really separate the cells tho ( remember each table cell has a border effect applied to it already.

[redmaniack]

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.

[Stomme poes]

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

[dresden_phoenix]

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

[noonnope]

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

<!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.

[dresden_phoenix]

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

[noonnope]

that's why i suggested <div>s instead

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

[dresden_phoenix]

but they would not be equal height

[Paul O'B]

Hi,

This works everywhere except IE6 but needs an extra element.

<!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.

<!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>

[noonnope]

or you could try this:

<!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.

[dresden_phoenix]

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

<!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!!!