uniapp、WeChat アプレット -- カスタム テーブル

うわぁ~~~ 何言ってるの、uniapp テーブル コードがアプレットに変換されても、WeChat アプレットにはテーブルがないことがわかります。！！泣く！

元々はフレックスレイアウトを使いたかったのですが、急にCSSを思いつきました

表示: テーブル;表示: テーブルセル;表示: テーブル行

以下のコード

1. 最も単純な形式

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

セルの結合など、少し難しいテーブルは flex と組み合わせることができます。

今度時間があるときに書きます、さようなら~~