Форматирование HTML/CSS: Истинный интервал между ячейкой ↔ , а не между ячейкой ↔ any

Я ищу подсказки относительно расстояния между ячейками таблицы. Я знаю cellspacing/cellpadding в HTML и их эквивалентах CSS border-spacing/padding, но они делают больше того, чего я ожидал бы при их именах. То, что я хочу достичь, - это клетка, подразумеваемая термином: расстояние между ячейками, а не между ячейкой и любым элементом, окружающим ее.

Вот изображение, чтобы показать, что я имею в виду:

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

Ответы

Ответ 1

Простое решение, которое всегда срабатывало для меня (даже в IE), должно дать таблице отрицательный margin тот же размер, что и border-spacing.

Быстрый и грязный образец: http://jsfiddle.net/rBkPQ/

Ответ 2

Попробуйте следующее: http://jsfiddle.net/dBSWV/

IE8 не поддерживает :last-child, поэтому, если вам нужно, чтобы он работал там, вам нужно использовать, например, tr.last > td > div и добавить класс .last.

table {
    border: 1px solid red
}
td > div {
    border: 1px solid #000;
    margin: 5px
}
tr:first-child > td > div {
    margin-top: 0
}
tr:last-child > td > div {
    margin-bottom: 0
}
td:first-child > div {
    margin-left: 0
}
td:last-child > div {
    margin-right: 0
}

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><div>Content 1</div></td>
        <td><div>Content 2</div></td>
        <td><div>Content 3</div></td>
    </tr>
    ..
</table>

Ответ 3

Может быть, вот так: http://jsfiddle.net/H37BG/6/

Пунктирная граница - это граница стола, которую вы можете установить равным нулю.:)