垂直边框被水平边框弄乱 - flexbox

Question

我使用flexbox创建了一个表。我想在中心添加一条垂直线，所以我在所有第一列中添加了border-right，但是行底部的边框打破了垂直线的可视流。我很难绕过如何解决这个问题。 如何在保持底部边框的同时添加垂直线？

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

Answer 1

Just remove

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

Like this https://jsfiddle.net/oczxqxmu/1/

If you want to keep the bottom-borders, use ::after and position:absolute to create a line in the middle of your table, like this

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