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

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

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

大家都知道微信小程序自身沒有提供表格這個(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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