Как сверстать эту рамку в таблице и вообще возможно ли это?

Question

[QWERTY01]

В голову, как вариант, создать еще одну пустую ячейку, на которую и поставить эту рамку, но пустой элемент в html это же неправильно? полностью рисовать эту рамку отдельным псевдо-элементом и размещать его Абсолютным позиционированием?

Может быть есть более корректный вариант?

Answer 1

[Антон Усачев]

Обратиться только к ячейкам в первому ряду и...

table tr:first-child td {
	border-top: 1px solid #eee;
}

UPD: если вопрос про правый отступ в последней колонке, то можно схитрить. Цветом заливать див внутри ячеек, а последней в ряду давать правый паддинг:

table tr td {
	background: #fff;
}

table tr:first-child td {
	border-top: 1px solid #eee;
}

table tr td:last-child {
	padding-right: 40px;
}

table tr td div {
	width: 100%;
	height: 100%;
	background: #fceeff;
}

Comments

[Сергей delphinpro]

можно обойтись и без дива, закрашивая саму ячейку с паддингов, воспользовавшись свойством background-clip: content-box;

[QWERTY01]

Сергей delphinpro, спасибо, обязательно испробую