html - 垂直边框被水平边框弄乱了 - 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/

如果你想保留底部边框，使用::after 和 position:absolute 在你的表格中间创建一条线，就像这样

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