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

Question

[#FFFFFF]

А именно смущают линии по всей ширине, в то время как контент имеет отступы.
Пробовала задавать паддинги 1й и поледней ячейке, но тогда контент в них некрасиво сжимается.
Надо заметить, что ширину каждого столбца я указывать не хочу, т.к. она может меняться.
Есть идеи?)

p.s. возможно изображение очень бледное, там под заголовком таблицы линия во всю ширину светло-серая.

Answer 1

[VoidVolker]

Разместить с каждой стороны по пустой ячейке. Или просто заглянуть в исходник страницы.

Comments

[#FFFFFF]

Какой страницы? Это изображение из макета.

Пустая ячейка - вариант, жаль правда замусоривать разметку.

[VoidVolker]

Ну, не так уж и много - по одной на каждый блок, итого шесть ячеек.

[#FFFFFF]

VoidVolker: да, пока это наиболее приемлемый вариант. Спасибо!

[VoidVolker]

На здоровье! =) Минимизировать количество ячеек можно через rowspan аттрибут, если что.

[VoidVolker]

А так вон же выше вполне рабочий вариант кинули.

[#FFFFFF]

Тот вариант, как мне показалось, тяжеловато кастомизировать) сходу не получилось даже отступы выставить между текстом и линией, и еще некоторые моменты, так что я решила, что этот костыль не стоит того))

Answer 2

[display: block]

codepen.io/anon/pen/RGQkvV

Comments

[#FFFFFF]

Пробовала этот костыль, его проблема в том, что он работает только в таком виде, как он есть. Например, мне нужны более большие отступы между текстом и линией. Этого уже не сделать!
Но тем не менее спасибо!

Answer 3

[Severus256]

как бы это ни было банально.. это не <hr/> ? :D

Comments

[#FFFFFF]

Если вставлять hr в таблицу, то hr выносится браузером над таблицей (по крайней мере хром так рендерит)