Межстрочный интервал стола: вокруг стола нет места

Question

Я строю динамический стол.

Каждая ячейка имеет серый фоновый цвет, и я хочу пробел между каждой ячейкой (по вертикали и по горизонтали).

Поэтому я использую свойство CSS

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

Это хорошо работает, за исключением того факта, что это белое пространство не только между клетками; это фактически вокруг каждой ячейки, включая ячейки, которые находятся на краях стола.

Это означает, что вокруг стола есть пробел.

Есть ли способ сказать: "поместите пробел между границами исключенных ячеек, если эта граница находится на краю таблицы"

Примечание: это динамическая таблица, поэтому я бы хотел избежать выделенного класса CSS для "внутренних" ячеек.

Answer 1

Вы можете достичь желаемого дизайна

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;}

Демо на http://jsfiddle.net/gaby/cHpTE/

Answer 2

Что делать, если вы используете

:not(:first-child):not(:last-child)

в твоем css? это решение?

будет выглядеть

table:not(:first-child):not(:last-child)
{
    border-spacing:10px;
}

Вы можете разделить интервалы, используя больше параметров:

border-spacing: 10px 10px;

или же

border-spacing: 5px 10px 5px 10px;