1. 前言

2021即将过去了，今年也参与了不少小程序开发。在小程序里面，并没一个比较完善的表格控件。有时候希望有Element 那种table组件，但是在移动端里面展示table，要写完善是很困难，但是通过一些小小样式flex布局。可以简单地模拟一个表格展示效果。仅仅是一个展示的效果。里面用到代码并不多。看如何下。我们先用html代码模拟一下。

2 .搭建一个结构

表格里面要头和身，第一步我们先建立一个简单结构。看如下的效果图。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格</title></head><body><div class="ui-min-table"><div class="ui-table-head"><div class="ui-h-label">类型</div><div class="ui-h-label">规格</div><div class="ui-h-label">价格</div><div class="ui-h-label">描述</div></div><div class="ui-table-content"><div class="ui-table-hd">袜子</div><div class="ui-table-bd"><div class="ui-t-item"><div class="ui-t-subitem">大</div><div class="ui-t-subitem">10</div><div class="ui-t-subitem">舒适，柔顺，简单装配</div></div></div>        </div></div></body>
</html>

我们先拆解一下里面结构，大体可以分为头和身。我们第一步先实现头部功能。我们将上面代码进行预览。这个代码结构如下。似乎没有样式加持下变得杂乱无章。但是不要紧。我们接下来，进行头部改造。

3 .样式展示表格头部

这一步，我们只做表格头部，我们希望将文字横放处理。那么先来一个flex的横向布局。将头部等比横放处理。看如下样式，处理文字的布局。每一个标签进行25%等比处理，并且对其描边和添加背景颜色。。

 <style>.ui-table-head{display: flex;flex-direction: row;}.ui-h-label{background-color: #eee;color: #333;width: 25%;height: 30px;text-align: center;line-height: 30px;border: 1px solid #ddd;margin: 0 -1px -1px 0;}</style>

经过布局后文字看起来顺眼了。这一步。我们样式就完成了。

4 .样式展示表格身部

接下来，我们要尝试改造表格下面样式。让效果看起来更加像一个表格。
同样会采取flex的布局。

    .ui-table-content{}.ui-table-hd{}.ui-table-bd{}.ui-t-item{}.ui-t-subitem{}

对以上样式进行一步步处理。我们会先使用flex布局对文字进行横放。
会将身体分成25%和75%处理。在75%部分会划分成三等分，每一个大概33.333%比例。

    .ui-table-content{display: flex;flex-direction: row;}.ui-table-hd{width: 25%;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid #ddd;border-right: none;margin: 0 -1px -1px 0;}.ui-table-bd{width: 75%;display: flex;flex-direction: column;}.ui-t-item{display: flex;flex-direction: row;width: 100%;}.ui-t-subitem{text-align: center;font-size: 12px;border:1px solid #ddd;margin: 0 -1px -1px 0;width: 33.3333%;min-height: 40px;display: flex;flex-direction: column;justify-content: center;align-items: center;}

在这里插入图片描述

5 .div描边说明

在上面样式中，我们对每一个div都进行border处理，格子之间看起来就会连贯起来。注意：div每一个相邻的border会导致加粗情况重叠起来并不好看。

需要添加 margin: 0 -1px -1px 0; 进行处理。处理后，效果就会变正常。达到预期
对比一下上下2张图。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格</title></head><style>.ui-table-head{display: flex;flex-direction: row;}.ui-h-label{background-color: #eee;color: #333;width: 25%;height: 30px;text-align: center;line-height: 30px;border: 1px solid #ddd;margin: 0 -1px -1px 0;}.ui-table-content{display: flex;flex-direction: row;}.ui-table-hd{width: 25%;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid #ddd;border-right: none;margin: 0 -1px -1px 0;}.ui-table-bd{width: 75%;display: flex;flex-direction: column;}.ui-t-item{display: flex;flex-direction: row;width: 100%;}.ui-t-subitem{text-align: center;font-size: 12px;border:1px solid #ddd;margin: 0 -1px -1px 0;width: 33.3333%;min-height: 40px;display: flex;flex-direction: column;justify-content: center;align-items: center;}</style><body><div class="ui-min-table"><div class="ui-table-head"><div class="ui-h-label">类型</div><div class="ui-h-label">规格</div><div class="ui-h-label">价格</div><div class="ui-h-label">描述</div></div><div class="ui-table-content"><div class="ui-table-hd">袜子</div><div class="ui-table-bd"><div class="ui-t-item"><div class="ui-t-subitem">大</div><div class="ui-t-subitem">10</div><div class="ui-t-subitem">舒适，柔顺，简单装配</div></div>    <div class="ui-t-item"><div class="ui-t-subitem">中</div><div class="ui-t-subitem">8</div><div class="ui-t-subitem">舒适，柔顺，简单装配</div></div> <div class="ui-t-item"><div class="ui-t-subitem">小</div><div class="ui-t-subitem">6</div><div class="ui-t-subitem">舒适，柔顺，简单装配</div></div>         </div>      </div></div></body>
</html>

6 .改造成小程序

采取了flex布局+border组合就可以简单拼凑一个表格的效果。我们将上述div的代码改造成小程序界面。批量化将div变成view处理。同样使用以上的样式。但是在小程序里面单位是rpx，所以在改造过程需要微调处理。保留border:1px 做填充看如下效果图。一个具有大小的表格就出来了。

<view class="ui-min-table"><view class="ui-table-head"><view class="ui-h-label">类型</view><view class="ui-h-label">规格</view><view class="ui-h-label">价格</view><view class="ui-h-label">描述</view></view><view class="ui-table-content" wx:for="{{[1,2,3]}}"><view class="ui-table-hd">袜子</view><view class="ui-table-bd"><view class="ui-t-item"><view class="ui-t-subitem">大</view><view class="ui-t-subitem">10</view><view class="ui-t-subitem">舒适，柔顺，简单装配</view></view>  <view class="ui-t-item"><view class="ui-t-subitem">中</view><view class="ui-t-subitem">8</view><view class="ui-t-subitem">舒适，柔顺，简单装配</view></view> <view class="ui-t-item"><view class="ui-t-subitem">小</view><view class="ui-t-subitem">6</view><view class="ui-t-subitem">舒适，柔顺，简单装配舒适，柔顺，简单装配</view></view>         </view>     </view>
</view>

.ui-min-table{margin: 20rpx 20rpx;
}.ui-table-head{display: flex;flex-direction: row;
}.ui-h-label{background-color: #eee;color: #333;width: 25%;height: 60rpx;text-align: center;line-height: 60rpx;border: 1px solid #ddd;margin: 0 -1px -1px 0;
}.ui-table-content{display: flex;flex-direction: row;
}.ui-table-hd{width: 25%;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid #ddd;border-right: none;margin: 0 -1px -1px 0;
}
.ui-table-bd{width: 75%;display: flex;flex-direction: column;
}.ui-t-item{display: flex;flex-direction: row;width: 100%;
}.ui-t-subitem{text-align: center;font-size: 24rpx;border:1px solid #ddd;margin: 0 -1px -1px 0;width: 33.3333%;min-height: 40px;display: flex;flex-direction: column;justify-content: center;align-items: center;
}

7 .小结

采取flex布局可以足够对付展示出这样表格效果。采取代码量也不多。但是总体还是有很多渴望小程序能增强的地方。只能看官方能不能在表格开源出一个不错解决方案。

祝大家元旦节快乐。新的一年，依旧一样，平凡的一天，继续充满打鸡血的一天。

h5学习笔记：写一个小表格相关推荐

Extjs学习笔记之五——一个小细节renderTo和applyTo的区别作者：Katmaier 来源：博客园
件有两个看起来类似的配置项,applyTo和renderTo,这两个配置项都是用来指定将该extjs组件加载到什么位置.那他们到底有什么区别呢,网上搜了下,有两篇博文也是关于这个的, ExtJS中的r ...
使用python制作聊天框解谜游戏_使用Python写一个小游戏alien invasion！
最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规的项目开发流程,手把手教大家写个python小游戏,来感受下其中的 ...
嵌入式开发学习笔记9-做一个好玩的LED闪烁
嵌入式开发学习笔记9-做一个好玩的LED闪烁前言实际操作程序功能实现思路程序源码实现效果展示前言 LED小灯闪烁实质是控制单片机上的I/O口,通过向I/O口循环输入高低电平,从而控制LE ...
golang游戏开发学习笔记-开发一个简单的2D游戏(基础篇）
此文写在golang游戏开发学习笔记-创建一个能自由探索的3D世界之后,感兴趣可以先去那篇文章了解一些基础知识,在这篇文章里我们要创建一个简单的2D游戏场景以及配套的人物,并实现人物运动和碰撞检测功能 ...
【直播】手把手带你 5 分钟写一个小爬虫，从入门到超神！
在程序员界流传着这么一个顺口溜:爬虫玩得好,监狱进得早.数据玩得溜,牢饭吃个够--时不时还有 "XX 公司做违法爬虫,程序员坐牢" 的新闻爆出. 在看热闹的同时,很多人都会提出疑问 ...
python写游戏脚本-使用Python写一个小游戏
引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规的项目开发流程,手把手教大家写个python小游戏,来感受下 ...
python编程小游戏-使用Python写一个小游戏
引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规的项目开发流程,手把手教大家写个python小游戏,来感受下 ...
Jmeter使用基础笔记-写一个http请求
前言本篇文章主要讲述2个部分: 搭建一个简单的测试环境用Jmeter发送一个简单的http请求搭建测试环境编写flask代码(我参考了开源项目HttpRunner的测试服务器),将如下的代码保 ...
activiti7关联mysql_学习笔记：一个MySQL实例有多个Activiti数据库问题
学习笔记:一个MySQL实例有多个Activiti数据库问题使用SpringBoot + activiti6 搭建审批流项目,数据库使用的是MySQL.且我的数据库下存在多个activiti相关的数 ...
手机版python3h如何自制游戏_教你如何用 Python 写一个小游戏
教你如何用 Python 写一个小游戏引言最近 python 语言大火, 除了在科学计算领域 python 有用武之地之外, 在游戏后台等方面, python 也大放异彩, 本篇博文将按照正规的项 ...

h5学习笔记：写一个小表格