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

由于微信小程序组件中不带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;
}


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/1618489.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

50.服务程序SERVICE_STATUS、SERVICE_STATUS_HANDLE、RegisterServiceCtrlHandler、SetServiceStatus、SERVICE_TABL

我得先总结一下步骤&#xff1a; 一、在main函数中的操作 1.先创建一个main主函数&#xff0c;在main主函数中创建创建一个服务程序入口函数列的结构体并将其初始化 机构体SERVICE_TABLE_ENTRY DispatchTable[2]; 假设定义的服务入口函数是(LPSERVICE_MAIN_FUNCTION)ServiceMa…

使用 SAP WebIDE 将 SAP UI5 应用部署到 ABAP 系统时遇到的关于传输请求的错误

有朋友遇到一个在 webide 里部署 SAP UI5 应用到 ABAP Repository 里时出错的问题&#xff1a; 错误消息&#xff1a; Failed to get transports for the selected package. Request POST /webidedispatcher/destinations/LND500/sap/bc/adt/cts/transportchecks failed: Forbi…

【操作记录】CLion 中引入 Gurobi 并使用 C++ 编程

文章目录 一、前言二、具体操作2.1 创建项目2.2 修改编译工具2.3 修改 CMakeLists.txt2.4 修改 main.cpp2.5 运行测试 一、前言 虽然C编程大部分人都会选择使用VS&#xff0c;但是作为 IDEA 的长期用户&#xff0c;我还是比较习惯 JetBrains 风格的编译器&#xff0c;所以就选…

7.11英语学习及笔记

《花木兰》 Based on a Chinese legend, the film follows the story of the titular hero – a young woman who poses as a man in order to take her ailing father’s place in the Imperial army, after the threat of the invading Huns requires a man from every house…

针对韩国开展的一系列韩文类恶意文档定向攻击行动分析 part-1

?点个关注&#xff0c;你的支持是我更新最大的动力? 最近朝鲜APT组织的攻击事件层出不穷&#xff0c;基于看到一篇很好的文章&#xff0c;特此结合文章对朝鲜相关组织进行分析。 Financial Security Institute对近期一系列投放韩文类恶意文档的定向攻击行动命名为“DOKKAEBI…

跨国邮件诈骗团伙案例

如果某天你收到了这样一封邮件&#xff0c;啊&#xff0c;大体意思就是这人身患绝症且有一笔遗产&#xff0c;你是个幸运儿要你继承。 重点来了啊&#xff0c;他会伪造证件然后让你相信并按照对方的思路来&#xff0c;给他你的身份信息&#xff0c;例如身份证照片&#xff0c;你…

springboot+vue+Elementui图书馆自习室座位预约系统

随着学校的人数的扩招,图书馆的座位资源短缺问题日益严重&#xff0c;特别是在临近考试时&#xff0c;座位占座情况尤为明显。起大早、摞书本、放水杯&#xff0c;甚至粘上纸条……宣誓主权&#xff0c;在图书馆里&#xff0c;很多学生办法用尽&#xff0c;只为了能获得“一席之…

SQLite3 极简教程 Go 使用 SQLite 内存模式操作数据结构

SQLite 简介 关键词: RDBMS (embedded), C SQLite is a database engine written in the C language. It is not a standalone app; rather, it is a library that software developers embed in their apps. SQLite是一个开源的、内嵌式的关系型数据库。它最初发布于2000年,…

致--所有努力生活的人们(暑假学习总结与考研宣誓)

致--所有努力生活的人们 确定专业和院校科研任务关于英语的学习退游喜欢的女孩备战数模比赛学习智能算法计算机素养的锻炼basketball对未来的展望 虽然文章写的虽然不是很好&#xff0c;但是很用心有诚意&#xff0c;我保证读完你会充满慢慢能量的&#xff01; 本blog记录了暑假…

有书共读:《穷查理宝典》

1. 写在前面 最近有幸参加了Datawhale举办的一些读书会活动&#xff0c;里面有很多伙伴分享自己读过的一些好书并分享自己的读书心得和感悟&#xff0c;体会非常的深刻&#xff0c; 也学习到了很多的知识&#xff0c; 所以受到了一些伙伴的影响&#xff0c;最近也开始在闲暇的…

以“人民的名义”劝你快去读点书

“我之前看一个调查&#xff0c;说中国人的读书量远低于世界平均水平&#xff1b;而且趋于图片化、碎片化&#xff0c;缺乏深度。这年头&#xff0c;你们还有个读书会&#xff0c;算是难得了”&#xff0c;陆亦可对赵东来说。“而且我们读的还是闲书&#xff0c;没有任何经济利…

第三讲,三维空间刚体运动

一个刚体在三维空间中的运动是如何描述的。我们当然知道这由一次旋转加一次平移组成。平移确实没有太大问题&#xff0c;但旋转的处理是件麻烦事。我们将介绍旋转矩阵、四 元数、欧拉角的意义&#xff0c;以及它们是如何运算和转换的。 1.向量&#xff0c;坐标系和旋转矩阵 点…

两独立样本的非参数检验(Mann-Whitney U 秩和检验)

原文地址&#xff1a;SPSS学习笔记之——两独立样本的非参数检验&#xff08;Mann-Whitney U 秩和检验&#xff09;作者&#xff1a;王江源 一、概述 Mann-Whitney U 检验是用得最广泛的两独立样本秩和检验方法。简单的说&#xff0c;该检验是与独立样本t检验相对应的方法&…

不止基因编辑 当所有技术都可能成为毒药

基因技术、纳米技术、机器人技术的新潘多拉之盒即将开启&#xff0c;你我却毫无查觉。我们不单受到大规模杀伤性武器的威胁&#xff0c;还有技术知识产生的大规模杀伤力。这一邪恶的力量&#xff0c;正由国家力量支持的大规模杀伤性武器&#xff0c;转向极端的个人。——Bill J…

市场的霸主:对冲基金世界的超额回报大师

《市场的霸主&#xff1a;对冲基金世界的超额回报大师》 基本信息 作者&#xff1a; (美)马妮特.阿胡贾(Maneet Ahuja) 译者&#xff1a; 毕崇毅 郑磊 出版社&#xff1a;机械工业出版社 ISBN&#xff1a;9787111425441 上架时间&#xff1a;2013-5-29 出版日期&#xff1a;201…

革命性新疗法后 第三例艾滋病治愈病例可能出现了!

伦敦病人的例子说明&#xff0c;柏林病人被治愈并非出于侥幸&#xff0c;而是可以被复制的。 艾滋病患者通常要终身每日服用病毒抑制药物。一旦停药&#xff0c;病毒就会在两三周内卷土重来。 新浪科技讯 北京时间3月12日消息&#xff0c;据国外媒体报道&#xff0c;一名德国艾…

SPSS学习笔记(三)方差分析ANOVA(F检验)

目录 一、单因素ANOVA 分析 过程 结果及分析 二、双因素ANOVA 案例及分析 过程 结果及分析 一、单因素ANOVA 单因素方差分析是两个样本平均数比较的引伸&#xff0c;它是用来检验多个平均数之间的差异&#xff0c;从而确定一种因素对试验结果有无显著性影响的统计方法…

JavaSE学习——异常

目录 一、异常概述 二、异常的体系结果 二、异常的处理&#xff1a;抓抛模型 三、try-catch-finally的使用 四、throws 异常类型 的使用 五、开发中如何选择使用try-catch-finally还是使用throws&#xff1f; 六、自定义异常 自定义异常步骤&#xff1a; 七、总结&a…

CAN总线学习——物理层、数据链路层、CANopen协议

1、CAN总线介绍 1.1、CAN总线描述 (1)CAN总线支持多节点通信&#xff0c;但是节点不分区主从&#xff0c;也就是不存在一个节点来负责维护总线的通信&#xff1b;这点可以和I2C总线对对比&#xff0c;I2C是一主多从模式&#xff1b; (2)是差分、异步、串行总线&#xff0c;采用…

MybatisPlus拦截器实战之数据的加解密和脱敏

文章目录 一、前言二、拦截器简介三、代码目录结构简介四、核心代码讲解4.1 application.yml文件4.2 自定义注解4.2.1 SensitiveEntity4.2.2 SensitiveData4.2.3 MaskedEntity4.2.4 MaskedField4.2.5 MaskedMethod 4.3 Mybatis-Plus 拦截器数据自动加密4.4 Mybatis 打印完整sql…