一秒學會微信小程序制作table表格

更新時間：2019年02月14日 16:09:13 作者：gqj.cn

這篇文章主要教大家一秒學會微信小程序制作table表格，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

效果圖：

代碼挺簡單方便的：

wxml:

 <view class='history-table-wrap'>
  <view class="table">
   <view class="tr">
     <view class="th th1">日期</view>
     <view class="th th2">時間</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">本次對海煞造成了100000點傷害</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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript模擬數(shù)組合并concat
這篇文章主要介紹了JavaScript模擬數(shù)組合并concat的相關資料,需要的朋友可以參考下
2016-03-03
如何利用原生JS實現(xiàn)圖片預覽加上傳(前后端交互)
在做網(wǎng)站系統(tǒng)時經(jīng)常會用到圖片上傳功能,用戶往往希望能看到自己上傳的圖片的樣子,下面這篇文章主要給大家介紹了關于如何利用原生JS實現(xiàn)圖片預覽加上傳,需要的朋友可以參考下
2022-01-01
JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名
本文主要介紹了JavaScript實現(xiàn)表格表單的隨機選擇和簡單的隨機點名，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
Position屬性之relative用法
Relative是position的一個屬性，是相對定位，通過本篇文章給大家介紹Position屬性之relative用法，對position屬性relative相關知識感興趣的朋友一起學習吧
2015-12-12
簡述JS瀏覽器的三種彈窗
本文給大家簡單介紹了JS瀏覽器的三種彈窗，簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-07-07
layui中的switch開關實現(xiàn)方法
今天小編就為大家分享一篇layui中的switch開關實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)跳轉(zhuǎn)詳情頁面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
JavaScript中數(shù)組sort()方法的基本使用與踩坑記錄
: js中用方法sort()為數(shù)組排序,這篇文章主要給大家介紹了關于JavaScript中數(shù)組sort()方法的基本使用,sort()方法已經(jīng)可以滿足我們對數(shù)組的很多處理需求,需要的朋友可以參考下
2021-06-06
JS使用cookie設置樣式的方法
這篇文章主要介紹了JS使用cookie設置樣式的方法,涉及javascript樣式的設置與cookie的讀寫相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2016-06-06
js不能獲取隱藏的div的寬度只能先顯示后獲取
js不能獲取隱藏div的的寬度，現(xiàn)在的辦法是先將其顯示出來，再獲取其寬度，計算位置，下面的示例，大家可以參考下
2014-09-09