Расстояние между ячейками HTML-таблицы – только между ячейками, без внешней ⇐ Html

[Anonymous]

Я пытаюсь добавить интервал между ячейками в таблицу html.

Я хочу добавить интервал между ячейками без внешнего интервала.

Моя проблема в том, что HTML-атрибут cellpacing и CSS-свойство border-spacing также добавляют интервал снаружи.




Я хотел бы разместить ячейки без красной (внешней) части - только желтую.

Возможно ли это?

Изменить:

• Изображение было нарисовано вручную (MS-Paint) только для иллюстрации.
• Раскраска предназначена для отладки - чтобы было видно, где находятся границы и интервалы.

Я нашел обходное решение, включающее несколько дополнительных элементов-s:

Код: Выделить всё

.inner-spacing {
border-collapse: collapse;
background-color: yellow;
border: 2px solid black;
}
.inner-spacing td {
padding: 0;
}
.inner-spacing td > div {
width: 60px;
height: 60px;
background-color: green;
border: 2px solid black;
margin: 10px;
}
.inner-spacing tr:first-child > td > div {
margin-top: 0px;
}
.inner-spacing tr:last-child > td > div {
margin-bottom: 0px;
}
.inner-spacing tr > td:first-child > div {
margin-left: 0px;
}
.inner-spacing tr > td:last-child > div {
margin-right: 0px;
}

Код: Выделить всё

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

Интересно, есть ли какие-нибудь другие решения - поэтому любое новое решение приветствуется!

Подробнее здесь: https://stackoverflow.com/questions/314 ... -outer-one