小程序不支持table標(biāo)簽怎么辦

小程序不支持table標(biāo)簽，但是可以使用css的display: table;來實(shí)現(xiàn)表格樣式。

推薦學(xué)習(xí)：小程序開發(fā)

具體實(shí)現(xiàn)如下：

1、通過設(shè)置js里面的數(shù)組對(duì)象格式模擬動(dòng)態(tài)后臺(tái)獲取的數(shù)據(jù)，然后將數(shù)組對(duì)象內(nèi)容以三個(gè)元素為一組組成數(shù)組對(duì)象格式再合并成一個(gè)新的數(shù)組對(duì)象格式，之所以這樣做就是為了，一行有三個(gè)單元格設(shè)計(jì)的:

Page({   data: {     tableData: [{ //模擬動(dòng)態(tài)獲取到的后臺(tái)數(shù)據(jù)：數(shù)組對(duì)象格式         id: 0,         name: 'table-th-cell'       },       {         id: 1,         name: 'table-th-cell'       },       {         id: 2,         name: 'table-th-cell'       },       {         id: 3,         name: 'table-tr-cell'       },       {         id: 4,         name: 'table-tr-cell'       },       {         id: 5,         name: 'table-tr-cell'       },       {         id: 6,         name: 'table-tr-cell'       },       {         id: 7,         name: 'table-tr-cell'       },       {         id: 8,         name: 'table-tr-cell'       },     ],     threeArray: '', //模擬將后臺(tái)獲取到的數(shù)組對(duì)象數(shù)據(jù)按照一行3個(gè)的單元數(shù)據(jù)的格式切割成新的數(shù)組對(duì)象（簡(jiǎn)單的說：比如獲取到數(shù)組是9個(gè)元素，切分成，3個(gè)元素一組的子數(shù)組）   },   onLoad: function() {     let that = this;     let threeArray = [];     // 使用for循環(huán)將原數(shù)據(jù)切分成新的數(shù)組     for (let i = 0, len = that.data.tableData.length; i < len; i += 3) {       threeArray.push(that.data.tableData.slice(i, i + 3));     }     console.log(threeArray);     that.setData({       threeArray: threeArray     })   }, })

2、設(shè)置wxml:

<view class="table">   <block wx:for='{{threeArray}}' wx:key='*this' wx:for-item='oneArray'> <!-- 注意嵌套的數(shù)組對(duì)象 -->     <view class="table-tr" wx:if='{{index<1}}'>       <block wx:for='{{oneArray}}' wx:key='id'>         <view class="table-th">{{item.name}}</view>       </block>     </view>     <view class="table-tr" wx:else>       <block wx:for='{{oneArray}}' wx:key='id'>         <view class="table-td">{{item.name}}</view>       </block>     </view>   </block> </view>

3、設(shè)置wxss:

.table {   display: table;   width: 100%;   /* border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，解決相鄰單元格邊框未合并導(dǎo)致有些邊框變粗的視覺效果 */   border-collapse: collapse;   overflow-x: hidden; } .table-tr {   display: table-row;   width: 100%;   height: 200rpx; } .table-th {   display: table-cell;   font-weight: bold;   border: 1px solid black;   text-align: center;   vertical-align: middle;   background-color: #ccc; } .table-td {   display: table-cell;   border: 1px solid black;   text-align: center;   vertical-align: middle; }

效果如下：