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

#html #css #вёрстка

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

Ответы

Ответ 1

Таблицу вкладываем в любой блочный элемент с рамкой. Для каждой ячейки, начиная с
второй устанавливаем только левую часть границы 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