CSS – удаление межрамочного интервала в первом и последнем столбцах ⇐ Html

[Anonymous]

Я пытаюсь стилизовать таблицу, разделяя каждый внутренний столбец белой рамкой шириной 3 пикселя, вот так:




До сих пор я пробовал несколько подходов, но у меня чертовски мало времени. Сначала я попытался установить правую границу для каждого элемента td, но обнаружил, что граница выходит за общую границу таблицы, создавая пробелы во внешней границе. Вот код и скрипка:

HTML:

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

Heading 1Heading 2Heading 3
A1B1C1
A2B2C2
A3B3C3

CSS:

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

.grid {
font-family: segoe ui, calibri, arial, sans-serif;
font-size: 12px;
color: #5B636B;
border: 1px solid #CCC;
border-collapse: collapse;
background-color: #FFF;
}

.grid tr {
height: 30px;
border-bottom: 1px solid #F4F4F4;
}

.grid tr:first-child {
border: none;
background-color: #ECEEF4;
}

.grid tr:last-child {
border: none;
}

.grid td {
padding: 0px 5px 0px 5px;
border-right: 3px solid #FFF;
}

FIDDLE:
Поиграйте здесь.

Следующий подход, который я попробовал, заключался в том, чтобы удалить border-collapse: свернуть и попытаться использовать собственное расстояние между ячейками таблицы для достижения того, чего я хотел. Хотя я мог удалить вертикальный интервал с помощью border-spacing, я не смог понять, как удалить горизонтальный интервал из крайне левой и крайне правой ячеек.

Вот код для этого подхода:

HTML:

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

Heading 1Heading 2Heading 3
A1B1C1
A2B2C2
A3B3C3

CSS:

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

.grid {
font-family: segoe ui, calibri, arial, sans-serif;
font-size: 12px;
color: #5B636B;
border: 1px solid #CCC;
border-collapse: separate;
border-spacing: 5px 0px;
background-color: #FFF;
}

.grid tr {
height: 30px;
border-bottom: 1px solid #F4F4F4;
}

.grid tr:first-child {
border: none;
background-color: #ECEEF4;
}

.grid tr:last-child {
border: none;
}

.grid td {
padding: 0px 5px 0px 5px;
}

Я также видел предложение использовать td:first-child, а затем td:first-child + td, td:first-child + td + td и т. д., но это кажется ужасно запутанным и не совсем практичным, потому что я не знаю, сколько столбцов у меня будет в конце, и оно может меняться со временем. (Я бы разместил ссылку на этот пост, но, поскольку я новичок, я не могу публиковать более двух ссылок - его заголовок «HTML: Как стилизовать каждую ячейку таблицы в столбце с помощью CSS?»)

Мне также не нравится использовать пустые столбцы, просто потому, что кажется, что должна быть лучшая альтернатива CSS.

Не могли бы вы помочь?

Подробнее здесь: https://stackoverflow.com/questions/212 ... st-columns