小程序简单实现表格布局

wxml部分

<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>

wxss部分

.table, .table div {

margin: 0 auto;

}

.table {

display: table;

width: 100%;

border-collapse: collapse; //合并边框

box-sizing: border-box;

}

.table-tr {

display: table-row; //此元素会作为一个表格行显示（类似 <tr>）

height: 92rpx;

}

.table-th {

display: table-cell; //此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

font-weight: bold;

border: 1rpx solid gray;

text-align: center;

vertical-align: middle;

}

.table-td {

display: table-cell;

border: 1rpx solid gray;

text-align: center;

vertical-align: middle;

}

效果图

转载于:https://juejin.im/post/5ca702816fb9a05e4f0588a9