小程序不支持表标签的解决方法

　　介绍

这篇文章主要介绍小程序不支持表标签的解决方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强>小程序不支持表标签怎么办

小程序不支持表标签,但是可以使用css的显示:表,来实现表格样式。

推荐学习:小程序开发

具体实现如下:

1,通过设置js里面的数组对象格式模拟动态后台获取的数据,然后将数组对象内容以三个元素为一组组成数组对象格式再合并成一个新的数组对象格式,之所以这样做就是为了,一行有三个单元格设计的:

页面({ 　　,,数据:{ 　　,,,tableData:,({,//模拟动态获取到的后台数据:数组对象格式 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-th-cell& # 39; 　　,,,,,}, 　　,,,,,{ 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-th-cell& # 39; 　　,,,,,}, 　　,,,,,{ 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-th-cell& # 39; 　　,,,,,}, 　　,,,,,{ 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-tr-cell& # 39; 　　,,,,,}, 　　,,,,,{ 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-tr-cell& # 39; 　　,,,,,}, 　　,,,,,{ 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-tr-cell& # 39; 　　,,,,,}, 　　,,,,,{ 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-tr-cell& # 39; 　　,,,,,}, 　　,,,,,{ 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-tr-cell& # 39; 　　,,,,,}, 　　,,,,,{ 　　,,,,,,,,,, 　　,,,,,,,名字:,& # 39;table-tr-cell& # 39; 　　,,,,,}, 　　,,,, 　　,,,threeArray:, & # 39; & # 39;,,//模拟将后台获取到的数组对象数据按照一行3个的单元数据的格式切割成新的数组对象(简单的说:比如获取到数组是9个元素,切分成,3个元素一组的子数组) 　　,,}, 　　onLoad才能:函数(),{ 　　,,,let  that =,; 　　,,,let  threeArray =, []; 　　,,,//,使用的循环将原数据切分成新的数组 　　,,,for  (let 小姐:=,0,,len =, that.data.tableData.length;,小姐:& lt;, len;,小姐:+=,3),{ 　　,,,,,threeArray.push (that.data.tableData.slice(我,小姐:+,3)); 　　,,,} 　　,,,console.log (threeArray); 　　,,,that.setData ({ 　　,,,,,threeArray: threeArray 　　,,,}) 　　,,}, 　　})

2,设置wxml:

& lt; view 类=皌able"比; 　　& lt;才能block 天气:=& # 39;{{threeArray}} & # 39;,天气:关键=& # 39;*这个# 39;,天气:项=& # 39;oneArray& # 39;比; 　　& lt; !——,注意嵌套的数组对象,——比; 　　,,,& lt; view 类=皌able-tr",天气:如果=& # 39;{{index<1}} & # 39;比; 　　,,,,,& lt; block 天气:=& # 39;{{oneArray}} & # 39;,天气:关键=& # 39;id # 39;比; 　　,,,,,,,& lt; view 类=皌able-th"在{{item.name}} & lt;/view> 　　,,,,,& lt;/block> 　　,,,& lt;/view> 　　,,,& lt; view 类=皌able-tr",天气:else> 　　,,,,,& lt; block 天气:=& # 39;{{oneArray}} & # 39;,天气:关键=& # 39;id # 39;比; 　　,,,,,,,& lt; view 类=皌able-td"在{{item.name}} & lt;/view> 　　,,,,,& lt;/block> 　　,,,& lt;/view> 　　& lt;才能/block> 　　& lt;/view>

3,设置wxs:

.table  { 　　,,显示:表; 　　,,宽度:100%;/*,才能border-collapse 属性设置表格的边框是否被合并为一个单一的边框,解决相邻单元格边框未合并导致有些边框变粗的视觉效果,*/,,border-collapse:崩溃; 　　overflow-x才能:隐藏; 　　} 　　.table-tr  { 　　,,显示:作用是; 　　,,宽度:100%; 　　,,身高:200 rpx; 　　} 　　.table-th  { 　　,,显示:表格单元; 　　,,粗细:大胆的; 　　边境才能:1 px  solid 黑色; 　　,,text-align:中心; 　　,,vertical-align:中间; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

小程序不支持表标签的解决方法