?使用 Element UI <el-table>時(shí)，總會(huì)自帶外邊框，寫了好多css樣式始終不能去除，最終發(fā)現(xiàn)是th與td所帶的樣式。
代碼如下文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-698672.html
el-table 加 class="customer-no-border-table"?
<el-table
:data="personnelList"
style="width: 100%"
class="customer-no-border-table"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
</el-table>?CSS樣式
/*去掉表格單元格邊框*/
.customer-no-border-table th{
border:none;
}
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
border:none;
}
/*表格最外邊框*/
.customer-no-border-table .el-table--border, .el-table--group{
border: none;
}
/*頭部邊框*/
.customer-no-border-table thead tr th.is-leaf{
border: 0px solid #EBEEF5;
border-right: none;
}
.customer-no-border-table thead tr th:nth-last-of-type(2){
border-right: 0px solid #EBEEF5;
}
/*表格最外層邊框-底部邊框*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
width: 0;
}
.customer-no-border-table::before{
width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
width: 0;
}
.customer-no-border-table .el-table__header tr th{
background: #fff;
color: #333333 ;
padding: 3px ;
fontWeight: 550 ;
height: 36px ;
border: 0px;
font-size: 15px;
}修改完后**********************邊框已經(jīng)去除?
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-698672.html
到了這里，關(guān)于Element UI ＜el-table＞去除外邊框的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
