【微信小程序遇到的坑】实现跨行跨列的表格

由于微信小程序组件中不带table标签，所以只能自己制作一个table表格，并且是实现跨行跨列的复杂表格。

直接上代码，即可预览效果

wxml

<view class="table"><view class="tr tr_title">上午8:30-11:45</view><view class="tr bg-w"><view class="th width1">板块</view><view class="th width2">时间</view><view class="th width2">环节</view><view class="th width1">时长</view></view><view class='tr'><view class="td  td_center">开场</view><view class="td width2"><view class="tdd2">签到/暖场（展示区开放）</view><view class="tdd2 border-none">签到/暖场（展示区开放）</view></view><view class="td width2"><view class="tdd2">签到/暖场（展示区开放）</view><view class="tdd2 border-none">签到/暖场（展示区开放）</view></view><view class="td width1 td_center">60分钟</view></view><block wx:for="{{6}}" wx:key=""><view class="tr"><view class="td">业绩展示</view><view class="td width2">09:30-09:35</view><view class="td width2">主持人开场</view><view class="td">5分钟</view></view></block>
</view>

wxss

.table {border-bottom: 1rpx solid #555; position: absolute;top: 50rpx;left: 0;right: 0;margin: auto;width: 96%;font-size: 14px;
}.tr {display: flex;width: 100%;border-top: 1rpx solid #555;border-left: 1rpx solid #555;color: #555;box-sizing: border-box;
}
.tr_title{display:block;text-align:center;padding:20rpx 0;border-right: 1px solid #333;
}
.td {width: 20%;justify-content: center;text-align: center;border-right: 1rpx solid #555;padding: 20rpx 0;
}.th {justify-content: center;display: flex;height: 3rem;align-items: center;color: #555;border-right: 1rpx solid #555;
}.td_center {display: flex;align-items: center;
}.tdd2 {border-bottom: 1px solid #333;padding: 4px;
}.width1 {width: 20%;
}.width2 {width: 30%;
}.bg-g {background: #e6f3f9;
}.border-none {border: none;
}

【微信小程序遇到的坑】实现跨行跨列的表格相关推荐

微信小程序初步入坑指南
微信小程序初步入坑小指南安装工具 developers.weixin.qq.com/miniprogram- 打开链接下载小程序云开发 app.json 为json格式的文件,为一个配置文件,属于全 ...
微信小程序继续入坑指南
微信小程序继续入坑指南 wxml 类似于html 感觉和ejs灰常的相似数据绑定 js Page({data: {message: "hello world"} }) wxml ...
微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框
摘要: 不管是在普通的H5页面还是在微信小程序中,底部输入框一直是一大难题,因为键盘会在某些情况下遮挡信输入框一部分!值得庆幸的是:在微信小程序中,我们可以通过监听bindfocus来获取键盘的高度, ...
微信小程序从入坑到放弃二十九：一个小场景搞懂冒泡事件bindtap和catchtap的区别
摘要: 在微信小程序中,bindtap事件会产生冒泡,若不加以拦截,会一直冒泡到顶端.在某些情况下,一次点击会触发若干点击事件.为了防止冒泡,使用catchtap即可解决问题.在有全屏半透明背景的弹出 ...
微信小程序开发踩坑日记
2017.12.29 踩坑记录引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5 踩坑记录微信小程序设置元素满屏,横向直接w ...
微信小程序开发踩坑经验——小蜗社群
2019独角兽企业重金招聘Python工程师标准>>> 之前遇到并且解决的坑,这边也渐渐忘记了,在这里就不列出来了-- 1.wx.redirectTo和wx.navigateTo ...
微信小程序入门踩坑记（妥妥的干货，新手快快看过来）
初次上手微信小程序,各种踩坑各种百度,草草扫过官网的文字,呃....表示记不住不想看,然后看了一本入门基础, 诺,就这本啦(链接:https://pan.baidu.com/s/15hKlDNpowU ...
微信小程序开发跳坑指南（51-100）
接着上次的跳坑指南(1-50): http://blog.csdn.net/qq_38530880/article/details/72844271 跳坑<一百>ssl证书相关问题(SSL ...
两百条微信小程序开发跳坑指南（不定时更新）
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序联盟出品跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一 ...

【微信小程序遇到的坑】实现跨行跨列的表格

【微信小程序遇到的坑】实现跨行跨列的表格相关推荐

最新文章

热门文章