Search code examples
csshtml-tableborder-spacing

Table border-spacing : no space arround the table

I am building a dynamic table.

Each cell has a grey background color and I want a white space between each cell (vertically and horizontally).

So I am using the CSS property

table {
border-spacing:10px;
}
td {
background-color:grey;
}

It works well apart from the fact that this white space is not only between cells; it is actually around every cell, including the cells which are on the edges of the table.

This means that There is the white space around the table.

Is there a way to say: "put a space between the borders of the cells excepted if that border is on the edge of the table"

Note: that's a dynamic table, so I would like to avoid having a dedicated CSS class for "internal" cells.

Solution

  • You might be able to achive the design you want with 

    table {
    border-collapse:collapse;
}
td {
    background-color:grey;
    border:10px solid red; /*assuming red is the color of the background to make it look transparent*/
}
tr:first-child td{border-top:0}
tr:last-child td{border-bottom:0}
td:first-child{border-left:0;}
td:last-child{border-right:0;}

    Demo at http://jsfiddle.net/gaby/cHpTE/