微信小程序表格制作


微信小程序表格制作_第1张图片

*.js

msg:'数据'

*.wxml
< view class= "container">
< view class= "table">
< view class= "tr">
< view class= "th">标题1 view >
< view class= "th">标题2 view >
< view class= "th">标题3 view >
< view class= "th">标题4 view >
< view class= "th">标题5 view >
view >
< view class= "tr" wx:for= "{{5}}">
< view class= 'td'> {{msg}} view >
< view class= "td"> {{msg}} view >
< view class= "td"> {{msg}} view >
< view class= "td"> {{msg}} view >
< view class= "td"> {{msg}} view >
view >
view >
view >

*.wxss

.table {

border: 5px solid rebeccapurple;
border-right: 0;
border-bottom: 0;
width: 98%;
}

.tr {
width: 100%;
display: flex;
justify-content: space-between;
}

.th, .td {
padding: 10px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
width: 100%;
}

.th {
font-weight: 400;
background-color: #dadada;
}


你可能感兴趣的:(小程序,前端)