关于vue里面表格的问题

Question

由于表格需要动态的合并列，直接用v-for循环后台拿到的数据会不能很好的进行并列,所以就用了ul li 来模拟表格

Html:

            <ul class="table"
                style="border-top:1px solid #000;">
                <li>日期</li>
                <li style="border:1px solid #000;
                       border-width:0px 1px 0px 1px">
                    时间
                </li>

                <li style="border:1px solid #000;
                       border-width:0px 1px 0px 0px">
                    议程
                </li>

                <li>专家</li>
            </ul>

            <ul v-for="items in sem"
                class="table">

                <li>{{items.date}}</li>
                <!--时间-->
                <li v-if="items.detail.length >1"
                    style="border:1px solid #000;
                       border-width:0px 1px 0px 1px">

                    <ul class="table_child">
                        <li v-for="item in items.detail">{{item.time}}</li>
                    </ul>

                </li>

                <li v-else
                    v-for="item in items.detail"
                    style="border:1px solid #000;
                       border-width:0px 1px 0px 1px;
                       height:2em;">
                    {{item.time}}
                </li>
                <!--议程-->
                <li v-if="items.detail.length >1"
                    style="border:1px solid #000;
                border-width:0px 1px 0px 0px"
                >

                    <ul class="table_child">
                        <li v-for="item in items.detail">{{item.agenda}}</li>
                    </ul>

                </li>

                <li v-else
                    v-for="item in items.detail"
                    style="border:1px solid #000;
                border-width:0px 1px 0px 0px;
                height:2em;">
                    {{item.agenda}}
                </li>
                <!--专家-->
                <li v-if="items.detail.length >1">

                    <ul class="table_child">
                        <li v-for="item in items.detail">{{item.speaker}}</li>
                    </ul>

                </li>

                <li v-else
                    v-for="item in items.detail">
                    {{item.speaker}}
                </li>

            </ul>
            

css:
.table {

    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    font-size: 12px;
    border: 1px solid #000;
    border-width: 0px 1px 1px 1px;
    text-align: center;
    align-items: center;
}

.table li {
    width: 100%;
    line-height: 2em;
    overflow: hidden;
}

.table_child {
    display: flex;
    flex-flow: column nowrap;
    line-height: 2em;
}

.table_child li {
    width: 100%;
    height: 2em;
    border-bottom: 1px solid #000;
}

.table_child li:last-child {
    border-bottom: 0px;
}

后台拿到的数据:

[{

"date": "2016-10-15",
"detail": [{
    "time": null,
    "agenda": "报到领取文件",
    "speaker": null
}]

},
{

"date": "2016-10-16",
"detail": [{
    "time": "8:00-8:30",
    "agenda": "开幕式",
    "speaker": "江西省领导致辞"
},
{
    "time": "8:30-9:00",
    "agenda": "课程改革解读",
    "speaker": "教育部课程专家"
},
{
    "time": "9:00-10:30",
    "agenda": "衡水中学发展",
    "speaker": "校长:张文茂"
},
{
    "time": "10:30-12:00",
    "agenda": "新高考学校改革",
    "speaker": "校长:叶翠微"
},
{
    "time": "14:00-15:30",
    "agenda": "高中发展蓝皮书",
    "speaker": "院长:周彬"
},
{
    "time": "15:40-17:10",
    "agenda": "核心素养培养",
    "speaker": "备考主任:李时林"
}]

}]

之前里面内容字数过多我就隐藏掉了，现在需要让字数全部显示出来，这样的话，我目前的布局边框就会出现问题，暂时不晓得该怎么改，所以来求助下，有没有更好的布局方案