uniapp, WeChat applet -- custom table

Woooooo~~~ What do you say, the uniapp table code has been transferred to the applet only to find that the WeChat applet does not have a table! ! ! cry!

I originally wanted to use flex layout, but suddenly thought of css

display: table;display: table-cell;display: table-row！！嘻嘻嘻

Code below

1. The simplest form

<view class="table">
				<view class="tr">
					<view class="th">姓名</view>
					<view class="th">电话</view>
					<view class="th">年龄</view>
					<view class="th">家庭地址</view>
				</view>
				<view class="tr">
					<view class="td">张三</view>
					<view class="td">11111111111</view>
					<view class="td">28</view>
					<view class="zi td">xxxxx</view>
				</view>
</view>

	.table {
		width: 100%;
		border-radius: 8rpx;
		display: table;
		border: 1px solid #f7f7f7;
		border-collapse: collapse;
	}

	.th {
		text-align: center;
		color: #FFFFFF;
		padding: 20rpx 0;
		font-weight: bolder;
		display: table-cell;
		border: 1px solid #f7f7f7
	}

	.td {
		text-align: center;
		background: #FFFFFF;
		padding: 20rpx 0;
		display: table-cell;
		border: 1px solid #f7f7f7
	}

	.tr {
		display: table-row;
	}

Slightly more difficult tables - such as merging cells ------- can be combined with flex

I will write when I have time next time, Bye~~