微信小程序表格实现代码示例

• Z时代
• 2024-01-10
• 分类：技术分享

程序" title="微信小程序">微信小程序表格实现代码示例，其实就是css而已

样式

.table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
}
.table-tr {
    display: table-row;
}
.table-th {
    display: table-cell;
    font-weight: bold;
    border: 1rpx solid gray;
    text-align: center;
    vertical-align: middle;
    padding: 5px 0;
}
.table-td {
    display: table-cell;
    border: 1rpx solid gray;
    text-align: center;
    vertical-align: middle;
    padding: 5px 0;
}

模板

<view style="padding:15px;">
    <view class="table">
        <view class="table-tr">
            <view class="table-th">省份</view>
            <view class="table-th">GDP</view>
            <view class="table-th">增长率</view>
        </view>
        <view class="table-tr">
            <view class="table-td">广东</view>
            <view class="table-td">72812456</view>
            <view class="table-td">8.0%</view>
        </view>
        <view class="table-tr">
            <view class="table-td">河南</view>
            <view class="table-td">37010</view>
            <view class="table-td">8.3%</view>
        </view>
        <view class="table-tr">
            <view class="table-td">江苏</view>
            <view class="table-td">70116</view>
            <view class="table-td">8.5%</view>
        </view>
    </view>
</view>

效果

以上是 微信小程序表格实现代码示例 的全部内容， 来源链接： utcz.com/a/15153.html