Как сверстать такую таблицу?

Question

[nen0y]

(простите за качество картинки)

Comments

[Ankhena]

Вариантов много. Выбор зависит от желаний и того как она должна адаптироваться.

1. Верстаете, как будто закругленной рамки (только рамки) нет. Накладываете ее через ::after
2. Верстаете как 2 блока рядом, аккуратно совмещаете.
3. Мятую бумажку, полоски и рамку объединяете в фон. Сверху делаете текст и крестики.
4. Фон: бумажка + полоски градиентами. Сверху 2 блока.

Можно еще чего-нибудь придумать.

Answer 1

[Stalker_RED]

https://jsfiddle.net/q3qsekwa/

Шрифты и иконки сами подбирайте. (по хорошему, они должны быть в макете).
Ну и по картинке не совсем понятно что там с пунктиром. Можно ли его сделать через boder:dashed или придется возиться с border-image, или даже вшивать их намертво в фон.

Comments

[nen0y]

.foo td {
border-bottom: dashed 1px gray;
}

Как сделать что-бы пунктир смещался вместе с классом если я ему задам padding-left: 30px;?

[Stalker_RED]

nen0y, border - это внешняя граница. padding - внутренний отступ. Никак.

Но можно переделывать на фон, например. Попытайтесь описать, что вы хотите сделать.

[nen0y]

Stalker_RED, уже разобрался, спасибо. Можете помочь еще и с этим вопросом - Как разместить данный блок?