uniapp、微信小程序--自定义table（2）

小李很认真

已于 2023-12-11 18:06:39 修改

阅读量512

点赞数

文章标签： uni-app 微信小程序小程序

于 2023-12-11 18:01:59 首次发布

本文链接：https://blog.csdn.net/lingrer/article/details/134933060

版权

按照之前使用display：table书写的表格在ios系统上面会出现背景颜色渐变的样式不对

最后使用display：flex来布局

                    <view class="table">
						<view class="felx-row" >
							<view class="th" style="width: 80rpx">序号</view>
							<view class="th" style="flex: 1">名称</view>
							<view class="th" style="width: 120rpx;">次数</view>
							<view class="th" style="width: 120rpx;">率</view>
						</view>
							<view class="td" style="width: 80rpx">1</view>
							<view class="td" style="flex: 1">张飒</view>
							<view class="td" style="width: 120rpx;">5</view>
							<view class="td" style="width: 120rpx;">99%</view>
						</view>
					</view>

				.table {
					width: 100%;
					border-radius: 8rpx;
					background: #FFFFFF;
					// border: 1rpx solid #EFEFEF;
					font-size: 28rpx;
					.felx-row {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #F4F4F4;
					}
					.th {
						width: 80rpx;
						height: 80rpx;
						text-align: center;
						color: #333333;
						padding: 20rpx 0;
						font-weight: bolder;
					}

					.td {
						text-align: center;
						padding: 10rpx 0;
						display: flex;
						justify-content: center;
						vertical-align: middle;
					}
				}