使用flexbox在表行上显示边框图像

Question

您好我发现了关于在表格行周围放置图像边框的帖子......没有太成功...但是这些都是Flexbox的实现...

例如：HTML Tables using JPG images as borders

现在肯定可以在表格行周围放置一个图像，并根据标准的html表格对齐表格单元格（或者足够接近）

http://jsfiddle.net/6yu8jh7p/5/

我尝试使用flexbox，但我发现它影响了其子元素的流程，我希望这些元素保留在页面的正常HTML流程中。

见下文：

tr[draggable] {
                    display: flex;
                flex-flow: row;
                justify-content: space-between;
                border-style: solid;
                border-width: 5px;
                border-color: transparent;
                -moz-border-image: url(url) 5 repeat;
                -webkit-border-image: url(url) 5 repeat;
                -o-border-image: url(url) 5 repeat;
                border-image: url(url) 5 repeat;
                padding: 5px;
                margin: 10px 0;

            }
                    tr[draggable]  td{
                         display: flex;
                        flex-basis: 0;
                        display: flex;
                    }
                         tr[draggable]  td:first-child{
                          flex-grow: 6;
                          flex-flow: column;

                        }
                        tr[draggable]  td:last-child{
                            flex-grow: 1;
                        }