Вертикальная граница испортилась горизонтальной границей - flexbox

Question

Я создал таблицу с использованием flexbox. Я хочу добавить вертикальную линию вниз по центру, и поэтому я добавил border-right ко всем первым столбцам, однако границы в нижней части строк разбивают визуальный поток вертикальной линии. Мне сложно свернуть голову, как это решить. Как добавить вертикальную линию, сохраняя нижнюю границу?

jsfiddle: https://jsfiddle.net/oczxqxmu/

Answer 1

Просто удалите

.flex_row:not(:last-child) { 
     border-bottom: 2px solid #fff; 
} 

Как это https://jsfiddle.net/oczxqxmu/1/

Если вы хотите сохранить низовую границу, используйте :: после и позиции: абсолютный, чтобы создать линия в середине вашего стола, например,

https://jsfiddle.net/oczxqxmu/11/