关于javascript:解决vue中使用vhtml解析table没有显示线条

须要渲染进去的html的内容为：

"<table style=\"width: auto;\"><tbody><tr><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">123</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\"></th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\"></th></tr><tr><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">44</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\"></td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\"></td></tr></tbody></table><p><br></p><table style=\"width: auto;\"><tbody><tr><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">a</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">b</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">c</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">d</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">e</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">f</th><th colSpan=\"1\" rowSpan=\"1\" width=\"auto\">g</th></tr><tr><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">1</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">2</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">3</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">4</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">5</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">6</td><td colSpan=\"1\" rowSpan=\"1\" width=\"auto\">7</td></tr></tbody></table>"

最开始应用v-html解析富文本中的table，代码如下：

<div v-html="remarkHtml"></div>

页面渲染展现为下图，table中的实线框没有渲染进去

实线框没有渲染进去的起因是因为v-html是富文本中有啥渲染啥，所以，如果在table中没有设置款式的话，就须要手动增加款式！
解决方案：为渲染进去的table设置款式

<div class="html" v-html="remarkHtml"></div>

// css
.html {
    table {
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid #ccc;
        min-width: 50px;
        height: 20px;
    }
    th {
        background-color: #f1f1f1;
    }
}

这样就能够胜利渲染进去table表格