微信小程序手写table表格

简介: 微信小程序手写table表格

wxml

<view class="table">
  <view class="tr bg-w">
    <view class="th">张三</view>
    <view class="th" style="color: #409eff;">李四</view>
    <view class="th ">王五</view>
    <view class="th ">赵六</view>
  </view>
  <block>
    <view class="tr bg-g">
      <view class="td">男</view>
      <view class="td" style="color:#409eff">男</view>
      <view class="td">女</view>
      <view class="td">男</view>
    </view>
  </block>
</view>

wxss:想加其他样式得可以自己+

.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 3rem;
  align-items: center;
}
.td {
  width: 40%;
  justify-content: center;
  text-align: center;
}
.th {
  width: 40%;
  justify-content: center;
  /* color: #fff; */
  display: flex;
  height: 3rem;
  align-items: center;
font-size: 15px;
}

总结:有循环的可以自己填写数据

相关文章
|
小程序 JavaScript
微信小程序实现一个简单的表格
微信小程序实现一个简单的表格
203 0
|
小程序 JavaScript
小程序实现竖行布局视图(类表格)
小程序实现竖行布局视图(类表格)
94 0
|
存储 小程序 JavaScript
小程序读取excel表格数据,并存储到云数据库
小程序读取excel表格数据,并存储到云数据库
435 0
|
小程序 前端开发 JavaScript
小程序实战入门009---小程序表格实现,小程序做加减乘除简单运算
小程序实战入门009---小程序表格实现,小程序做加减乘除简单运算
229 0
|
存储 数据处理 开发工具
微信小游戏开发实战2-使用表格处理数据
本篇内容包括微信小游戏开发工具中的表格的使用。重点学习表格中的数据的设置,遍历和查找操作,以及如何使用“调试场景”来验证游戏中的逻辑是否正确。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
120 0
|
小程序 API 数据库
小程序中读取腾讯文档的表格数据
小程序中读取腾讯文档的表格数据
小程序中读取腾讯文档的表格数据
|
存储 数据处理
微信小游戏开发实战2-使用表格处理数据
上一节中讲过使用表格来存储和处理游戏中的数据。这一节我们直接上手,学习表格中的数据处理,我们将会实现以下的内容: 创建一个10行10列(10x10)的表格,默认值都设置为0 随机的在表格中插入一行数据1 逐行遍历,找到满足条件的行(即整行的数据都是1)
150 0
微信小游戏开发实战2-使用表格处理数据
|
JSON 移动开发 小程序
你期待的微信小程序表格组件来啦
背景: 在做H5开发中表格table是最常见的标签,如此好用的标签在微信小程序中却没有
|
30天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
452 7
|
30天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
504 1