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

呜呜呜~~~咋说呢，uniapp表格代码搞完转小程序才发现微信小程序没有table！！！哭泣！本来想用flex布局的，突然想到了cssdisplay: table;display: table-cell;display: table-row！！嘻嘻嘻下面上代码1、最简单的表格<view class="table"><view class="tr"><view clas

S❀M

2305人浏览 · 2022-03-04 13:56:13

S❀M · 2022-03-04 13:56:13 发布

呜呜呜~~~咋说呢，uniapp表格代码搞完转小程序才发现微信小程序没有table！！！哭泣！

本来想用flex布局的，突然想到了css

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

下面上代码

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就可以了

等下回有空在写，Bye~~