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;
	}