Страницы

Поиск по вопросам

пятница, 16 ноября 2018 г.

Как добиться подобного?


Суть проблемы: таблицами (или div-ами) добиться разделения колонок так, как на скрине. У границ tr, td могут ли быть отступы от краёв именно по границам? Или можно сверстать это 3-мя div-ами?


Ответ

Таблицу вкладываем в любой блочный элемент с рамкой. Для каждой ячейки, начиная с второй устанавливаем только левую часть границы border-left. Не забываем про border-collapse, иначе разделитель не будет сплошной.
div{ border: 1px solid black; border-radius: 15px; padding: 8px; display: inline-block; } table{ border-collapse: collapse; } th,td{ padding: 5px; text-align: center; border-left: 1px solid black; } th:first-child,td:first-child{ border-left: 0px; //убираем черту слева }
demo

Комментариев нет:

Отправить комментарий