技术标签: 微信创建表格
今天小编遇到了这样一个需求,用户想要列表信息,找了好多地方,才发现微信没有H5中的table标签,所以自己画了一个表格。发现效果还不错,分享给大家。以下是我的效果图(内容仅为参考):
以下是这个样式的wxml代码:
<view class="table" > <view class="tab_th"> <view class="th_td1 th_text"><text>序号</text></view> <view class="th_td2 th_text"><text>姓名</text></view> <view class="th_td3 th_text"><text>性别</text></view> <view class="th_td4 th_text"><text>备注</text></view> </view> <block > <view class="tab_tr"> <view class="tr_td1 text"><text>1</text></view> <view class="tr_td2 text"><text>张飞</text></view> <view class="tr_td3 text"><text>男</text></view> <view class="tr_td4 text"><text>已婚</text></view> </view> <view class="tab_tr"> <view class="tr_td1 text"><text>2</text></view> <view class="tr_td2 text"><text>关羽</text></view> <view class="tr_td3 text"><text>男</text></view> <view class="tr_td4 text"><text>已婚</text></view> </view> <view class="tab_tr"> <view class="tr_td1 text"><text>3</text></view> <view class="tr_td2 text"><text>刘备</text></view> <view class="tr_td3 text"><text>男</text></view> <view class="tr_td4 text"><text>已婚</text></view> </view> <view class="tab_tr"> <view class="tr_td1 text"><text>4</text></view> <view class="tr_td2 text"><text>赵云</text></view> <view class="tr_td3 text"><text>男</text></view> <view class="tr_td4 text"><text>已婚</text></view> </view> </block> </view>
下面是wxss代码:
.table{ width: 98%; border-top: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; position: relative; left: 1%; color: #333333; } .tab_th{ width: 100%; position: relative; height: 70rpx; border-top: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; background-color: #FAFAFA; display: flex; align-items: center; justify-content: center; } .th_td1{ width: 15%; height: 70rpx; border-top: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; background-color: #FAFAFA; display: flex; align-items: center; justify-content: center; } .th_td2{ width: 40%; height: 70rpx; border: 1px solid #E8E8E8; background-color: #FAFAFA; display: flex; align-items: center; justify-content: center; } .th_td3{ width: 25%; height: 70rpx; border: 1px solid #E8E8E8; background-color: #FAFAFA; display: flex; align-items: center; justify-content: center; } .th_td4{ width: 20%; height: 70rpx; border-top: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; background-color: #FAFAFA; display: flex; align-items: center; justify-content: center; } .tab_tr{ width: 100%; position: relative; height: 70rpx; border-top: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .tr_td1{ width: 15%; height: 70rpx; border-top: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .tr_td2{ width: 40%; height: 70rpx; border: 1px solid #E8E8E8; background-color:#FFFFFF; display: flex; align-items: center; justify-content: center; } .tr_td3{ width: 25%; height: 70rpx; border: 1px solid#E8E8E8; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .tr_td4{ width: 20%; height: 70rpx; border-top: #E8E8E8 solid 1px; border-bottom: #E8E8E8 solid 1px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .text{ font-size:12px; font-family:PingFangHK-Regular,PingFangHK; font-weight:400; color:rgba(51,51,51,1); line-height:17px; } .th_text{ font-size:16px; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(51,51,51,1); line-height:22px; }
希望可以帮助到大家,样式仅为参考,大家其实可以自己动手画一个表格,说不定更好!
文章浏览阅读3.1k次。解决 vscode 无法使用 compilerPath......_无法使用 compilerpath 解析配置
文章浏览阅读734次。类:• Struts1要求Action类继承一个抽象基类。Struts1的一个普遍问题是使用抽象类编程而不是接口。• Struts 2 Action类可以实现一个Action接口,也可实现其他接口,使可选和定制的服务成为可能。Struts2提供一个ActionSupport基类去实现常用的接口。Action接口不是必须的,任何有execute标识的POJO对象都可以用作Struts2的Action_1.说一下struts1和struts2 优缺点。
文章浏览阅读1.9k次。第一种:#include using namespace std;void myswap(int x,int y){ int t; t=x; x=y; y=t;}int main(){ int a,b; cout cin>>a>>b; myswap(a,b); cout cout _c语言 怎么实现函数参数可传可不传
文章浏览阅读4.4k次。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link href="css/css.css" type="text/css" rel="styles_网页自动回复html
文章浏览阅读2.3k次,点赞3次,收藏4次。在我们日常喝可乐雪碧的过程中,会看见无数气泡向水面移动,直到冒出水面,气泡比水轻会向前移动,我们称这种现象为冒泡。在我们数组排序中,每一个数组元素根据大小比对,小的元素不断向前移动,如同气泡在冒出一样,我们称这种排序方法为冒泡排序。冒泡排序重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成。_3473: 【冒泡排序】数组元素的排序
文章浏览阅读1.1w次。华硕固件、梅林固件、高恪固件等都是硬路由的“操作系统”,不是想刷就能刷的,不同的操作系统用于不同的平台。目前,硬路由的芯片来自四大厂商:博通、高通、联发科、瑞昱。(Realtek)。其中博通、高通的方案性能好,稳定性高,得到了华硕、网件等这些路由器厂商的鼎力支持,联发科的芯片性价比高,得到了国内TP-Link、腾达、小米等厂商的支持,而瑞昱(Reltek,称为螃蟹芯片)因为创新力不足,慢慢推出了主流路由器市场。梅林——博通博通芯片作为行业高端的头把交椅,得到了..._高恪固件
文章浏览阅读418次。作为”一带一路“和长江经济带的联结点,重庆是中西部高质量发展的重要增长地。西部(重庆)科学城是重庆科技创新的重大平台,重庆AI PARK园区便坐落于重庆市西部科学城核心区域,金融街片区凤鸣湖畔。AI PARK是特斯联打造的人工智能城市项目的先行示范区。是全球首个落地的AICITY微缩旗舰版样板点,建筑面积约6000平米,总投资3亿元,内设多个主题体验厅与智能实验室。包括行走的AI机器人,灯杆、垃圾桶等智能终端、50+IoT协议应用,自研算法加持。_大型创意文化园的智慧文化系统建设项目
文章浏览阅读1k次。open函数保存使用with open()新建对象写入数据(这里使用的是爬取豆瓣读书中一本书的豆瓣短评作为例子)123456789101112131415161718import requestsfrom lxmlimport etree#发送Request请求url= 'https://book.douban.com/subject/1054917/comments/'head= {'User-..._储存为数据框
文章浏览阅读1.4k次。一、工作分析的产生与发展(一)工作分析的思想探源 工作分析的思想起源于社会分工思想,先驱工作者:管仲、旬况、苏格拉底、柏拉图、亚当.斯密。(二)西方国家工作分析的发展历程 (1)工作分析的萌芽 1747年,狄德罗在编纂百科全书的过程实施了一次工作分析。 (2)泰勒的科学管理原理 系统的工作分析最早出现于19世纪末20世纪初。它是美国科学管理之父--F.W._工作分析的历史 苏格拉底
文章浏览阅读2.5k次。从字面上看,重写就是 重新写一遍的意思。其实就是在子类中把父类本身有的方法重新写一遍。子类继承了父类原有的方法,但有时子类并不想原封不动的继承父类中的某个方法,所以在方法名,参数列表,返回类型(除过子类中方法的返回值是父类中方法返回值的子类时)都相同的情况下, 对方法体进行修改或重写,这就是重写。但要注意子类函数的访问修饰权限不能少于父类的。..._重载和重写
文章浏览阅读268次。A. Xenia and Divisorstime limit per test1 secondmemory limit per test256 megabytesinputstandard inputoutputstandard outputXenia the mathematician has a sequence_codeforces - 342a
文章浏览阅读357次,点赞2次,收藏3次。一.对等网络搭建1.先建立如下图所示的网络拓扑2.使用右侧面板第二项Place Note注释交换机3.使用右侧面板第四项调色板对话框填充工作区将“No Fill”切换为“Fill Color”选择绘制矩形Select Outline Color为黑色绘制蓝色对话框放置在楼层二绘制黄色对话框放置在楼层一填充结果如下图所示:二.完成基础配置,测试连通性测试从ping 192.168.1.2到192.168.1.1的连通性测试从ping 192.168.1.1到1_内部局域网搭建csdn