大家都知道微信小程序自身沒有提供表格這個(gè)組件，但是今天的項(xiàng)目需求又出現(xiàn)了，所以只能模仿一個(gè)了。

效果圖：

代碼挺簡單方便的：

wxml:

 <view class='history-table-wrap'>  <view class="table">   <view class="tr">     <view class="th th1">日期</view>     <view class="th th2">時(shí)間</view>     <view class="th th3">傷害</view>   </view>   <view class="tr" wx:for="{{15}}">     <view class="td td1">2018/02/12</view>     <view class="td td2">11:30</view>     <view class="td td3">本次對(duì)海煞造成了100000點(diǎn)傷害</view>   </view>  </view> </view>

wxss:

.history-table-wrap{ position: absolute; width: 668rpx; height: 578rpx; left: 50%; margin-left: -334rpx; top: 70rpx; overflow-y: scroll; overflow-x: hidden;}/* 表格代碼  */.table{ border:1px solid #dadada; border-right:0; border-bottom: 0; width: 98%; margin-left: 1%;}.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%;}.th1,.th2,.td1,.td2{ width: 40%;}.th{ font-weight: 800; background-color: #b66242; font-size: 28rpx; color: #330e0e;}.td{ font-size: 20rpx; color: #ec9480;}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。