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?
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?
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:
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 : )
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,
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…
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>