微信小程序入门四:实现table效果
程序员文章站
2024-02-03 14:02:58
...
微信小程序中没有table组件,那么怎么实现呢?
其实使用多个view组件就可以实现,接下来就直接看代码吧
<!--index.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="{{text5}}">
<view class="td">{{item}}</view>
<view class="td">{{item}}</view>
<view class="td">{{item}}</view>
<view class="td">{{item}}</view>
<view class="td">{{item}}</view>
</view>
</view>
</view>
/*.css*/
page {
font-size: 14px;
color: #333;
}
.table {
border: 1px solid #dadada;
border-right: 0;
border-bottom: 0;
width: 98%;
}
.tr {
width: 100%;
display: flex;
justify-content: space-between;
}
.th, .td {
font-size: 16px;
padding: 10px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
width: 100%;
}
.th {
font-weight: 40;
background-color: #dadada;
}