一秒學(xué)會(huì)微信小程序制作table表格

發(fā)布時(shí)間：2020-09-09 17:14:57 來(lái)源：腳本之家閱讀：189 作者：gqj.cn 欄目：web開發(fā)

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

效果圖：

代碼挺簡(jiǎn)單方便的：

wxml:

 <view class='history-table-wrap'>
  <view class="table">
   <view class="tr">
     <view class="th th2">日期</view>
     <view class="th th3">時(shí)間</view>
     <view class="th th4">傷害</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%;
}
.th2,.th3,.td1,.td2{
 width: 40%;
}
.th{
 font-weight: 800;
 background-color: #b66242;
 font-size: 28rpx;
 color: #330e0e;
}
.td{
 font-size: 20rpx;
 color: #ec9480;
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

一秒學(xué)會(huì)微信小程序制作table表格

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽