微信小程序表格的实现（纯css 表格的实现）

display:table的用法

大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css为什么不用table系表格元素呢？

1、用DIV+CSS编写出来的文件k数比用table写出来的要小，不信你在页面中放1000个table和1000个div比比看哪个文件大

2、table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示

3、非表格内容用table来装，不符合标签语义化要求，不利于SEO

4、table的嵌套性太多，用DIV代码会比较简洁

项目中又需要类似表格的布局怎么办呢？可以用display:table来解决

display:table系列几乎是和table系的元素相对应的，请看下表：

table	（类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。
inline-table	（类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group	（类似 <tbody>）此元素会作为一个或多个行的分组来显示。
table-header-group	（类似 <thead>）此元素会作为一个或多个行的分组来显示。
table-footer-group	（类似 <tfoot>）此元素会作为一个或多个行的分组来显示。
table-row	（类似 <tr>）此元素会作为一个表格行显示。
table-column-group	（类似 <colgroup>）此元素会作为一个或多个列的分组来显示。
table-column	（类似 <col>）此元素会作为一个单元格列显示。
table-cell	（类似 <td> 和 <th>）此元素会作为一个表格单元格显示。
table-caption	（类似 <caption>）此元素会作为一个表格标题显示。

（1）div模拟表格

HTML代码

<view class="su-table-box"><view class="su-table"><!-- 表格标题 --><view class="su-tr"><view class="su-th" v-for="(list,index) in th" :key="index">{{list}}</view></view><!-- 表格内容 --><view class="su-tr" v-for="(list,index) in td" :key="index"><view class="su-td" v-for="(item,index_) in list" :key="index_">{{item}}</view></view></view>
</view>

CSS代码--使用的是scss格式

// css表格实现.su-table-box {height: 100%;margin: 0rpx 30rpx;overflow-x: auto;padding-bottom: 40rpx;.su-table {margin-top: 50rpx;display: table;border-collapse: collapse; //合并边框overflow-x: auto;// 宽度不能设置，要完全显示可以用word-break: keep-all;// 设置不换行white-space: nowrap;background-color: #FFFFFF;}.su-tr {display: table-row; //此元素会作为一个表格行显示（类似 <tr>）}.su-th {display: table-cell; //此元素会作为一个表格单元格显示（类似 <td> 和 <th>）height: 60rpx;line-height: 60rpx;text-align: center;border: 1rpx solid #DDDDDD;border-right: none;border-bottom: none;background-color: #87CEFA;color: #FFFFFF;}.su-td {padding: 0rpx 30rpx;display: table-cell; //此元素会作为一个表格单元格显示（类似 <td> 和 <th>）height: 60rpx;line-height: 60rpx;text-align: center;border: 1rpx solid #DDDDDD;border-right: none;}}

JS代码

            data() {return {// 表格标题th: ["姓名", "手机号", "所属社区", "性别", "昵称", "住址", "备注信息", "生成编号"],// 表格内容  这里只能使用 数组套数组格式td: [["滴滴滴","18399997777","多喝水","中性","护手霜","好的好的记得记得你电话","湖南省长沙市岳麓区","SCV00000001"],["滴滴滴2","18399997777","多喝水","中性","护手霜","好的好的记得记得你电话哈哈哈","湖南省长沙市岳麓区","SCV00000001"],["滴滴滴3","18399997777","多喝水","中性","护手霜","好的好的记得记得你电话","湖南省长沙市岳麓区","SCV00000001"],["滴滴滴4","18399997777","多喝水","中性","护手霜","好的好的记得记得你电话","湖南省长沙市岳麓区","SCV00000001"]],}},

效果展示：

微信小程序表格的实现（纯css 表格的实现）相关推荐

微信小程序优美界面之纯CSS星球
效果图项目开源地址帮忙点个星星哦 wxml <view class="container "><view class= ...
微信小程序之获取后台动态数据表格布局display:table
微信小程序之获取后台动态数据表格布局display:table 猿来独往 2018-09-02 本文没有采用flex布局和grid布局来设置表格的,而是通过 display: table;来设置. 一 ...
微信小程序中布局使用的css布局语法
微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习以下是布局的一些语法规则 class 用 .class{} id 用 #id{} 类的子元素添加css (1 ...
微信小程序为什么不用HTML5、CSS，自己搞了个WXML、WXSS，很多框架用不了，好处一点不知道？
转 https://www.zhihu.com/question/51809406 微信小程序为什么不用HTML5.CSS,自己搞了个WXML.WXSS,很多框架用不了,好处一点不知道,以前项目根本没 ...
iphone微信小程序底部预留bar安全距离css
项目场景: 提示:这里简述项目相关背景: iphone微信小程序底部预留bar安全距离css 问题描述提示:这里描述项目中遇到的问题: iphone微信小程序底部预留bar安全距离css @Over ...
微信小程序(5)——如何制作好看的表格
✅ 因为 "表格" 在日常统计中无处不在,所以今天来做一做.但是微信小程序不支持 table 标签,我准备用 "上一篇--Flex布局" 学的 flex 来实现 ...
微信小程序实现背景色渐变（css实现）
参考链接: (1)微信小程序用CSS(.wxss)设置背景颜色渐变的方法 https://blog.csdn.net/qq15577969/article/details/102662424 (1)核 ...
微信小程序一秒学会制作table表格
大家都知道微信小程序自身没有提供表格这个组件,但是今天的项目需求又出现了,所以只能模仿一个了. 效果图: 代码挺简单方便的: wxml: <view class='history-table-w ...
微信小程序js如何动态设置css
微信小程序中可以使用setData()方法动态设置CSS样式. 例如,我们可以在wxml文件中定义一个样式类: ``` <view class="my-class">H ...
微信小程序css3动画怎么写,微信小程序动画课程-通过wxss(css)来实现-animation 属性...
animation 属性微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua 定义和用法 animat ...

微信小程序表格的实现（纯css 表格的实现）

display:table的用法

微信小程序表格的实现（纯css 表格的实现）相关推荐

最新文章

热门文章