Суть проблемы: таблицами (или 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
Комментариев нет:
Отправить комментарий