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~~