小程式簡單實現表格佈局

簡單卟容易發表於2019-04-05

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

效果圖

小程式簡單實現表格佈局


相關文章