python入门基础系列设计表格小程序_小程序实战入门009—小程序表格实现，小程序table实现...

点击下面网址进入系列教程

小程序默认是不支持table表格的，如果我们想实现小程序表格效果，就得自己拼凑。实现方案有很多，不过个人感觉通过form和input标签来实现是比较好的方式。

Paste_Image.png

下面来看下实现思路

一，首先看index.wxml文件

这里用form实现整个表格，然后input实现表格内的单元格。布局其实很简单，主要是布局完成后通过css来实现表格样式

这里有几点要说明的

1,input可以通过设置disabled来不让用户输入，这样就可以作为纯文本展示。比如上图的文本

2,表格的间隔先需要自己用wxss来拼凑

求和表格计算 清零 小程序不支持table标签，这里我们自己通过form和input来实现表格。有问题加 微信2501902996

二，再来看index.wxss文件

这里我不多说了，代码里都有注释

/*index.wxss *//*实现子控件居中显示 */.root { display: flex; flex-direction: column; align-items: center;}/*顶部标题 */.title { font-size: 34rpx; margin: 40rpx;}.wechat { font-size: 44rpx; color: red;}/*表格布局 */.table{ border: 1px solid gray; width: 600rpx;}/*第一行样式 */.section-top { display: flex; width: 600rpx; flex-direction: row;}.input-top { border-right: 1px solid gray;