Форматирование HTML / CSS: ИСТИННЫЙ интервал между ячейкой <->, а не между ячейкой <-> любой - PullRequest
Новая
       45

Форматирование HTML / CSS: ИСТИННЫЙ интервал между ячейкой <->, а не между ячейкой <-> любой

13 голосов
/ 26 мая 2011

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

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

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

Ответы [ 3 ]

11 голосов
/ 26 мая 2011

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

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

3 голосов
/ 26 мая 2011

Попробуйте это: 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>
1 голос
/ 26 мая 2011

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

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

...