uniapp, subprograma WeChat - tabla personalizada

Woooo ~~~ ¿Qué dices? El código de la tabla uniapp se convierte al subprograma solo para descubrir que el subprograma WeChat no tiene una tabla. ! ! ¡llorar!

Originalmente quería usar el diseño flexible, pero de repente pensé en CSS

mostrar: tabla; mostrar: tabla-celda; mostrar: tabla-fila !!嘻嘻嘻

Código a continuación

1. La forma más sencilla

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

Tablas un poco más difíciles, como fusionar celdas ------- se pueden combinar con flex

Escribiré cuando tenga tiempo la próxima vez, Adiós~~

Supongo que te gusta

Origin blog.csdn.net/sxmzhw/article/details/123275045
Recomendado
Clasificación