微信小程序表格制作

最新推荐文章于 2024-12-30 17:56:29 发布

原创最新推荐文章于 2024-12-30 17:56:29 发布 · 1.5w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #wxss #表格

小程序同时被 2 个专栏收录

8 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

*.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;
}