vue自制表格

一、有时候element-ui的表格不满足需求，需要自定义表格，例如图下

二、上代码

            <table class="tablenew table1" cellpadding="0" cellspacing="0">
<tr>
<td>身份证号码</td>
<td>111111111</td>
<td>户籍地址</td>
<td>111111111</td>
</tr>
<tr>
<td>籍贯</td>
<td>1111111111111</td>
<td>现住地址</td>
<td>22222222222222</td>
</tr>
</table>

样式如下

.tablenew{
width: 100%;
border-radius: 6px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border: 1px solid #DBDBDB;

}
.tablenew tr td{
border: 1px solid #DBDBDB;
border-bottom: 0;
border-right: 0;
height: 48px;
font-size: 14px;
padding: 0 16px;
color: #4D5051;
}
.tablenew tr td:nth-child(even){
color: #202426 !important;
}
.tablenew tr td:last-child{
border-right: 1px solid #DBDBDB;
}
.tablenew tr:last-child td{
border-bottom:1px solid #DBDBDB;
}
.tablenew tr td:nth-child(odd){
background: #F5F6F7;
}
.tablenew tr:first-child td{
border-top: 0;
}
.tablenew tr:last-child td{
border-bottom: 0;
}
.tablenew tr td:first-child{
border-left: 0;
}
.tablenew tr td:last-child{
border-right: 0;
}

原文地址：https://blog.csdn.net/huang_jimei/article/details/140467216

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！