這篇文章主要介紹小程序不支持table標(biāo)簽的解決方法,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)建站主打移動網(wǎng)站、成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護、域名注冊、等互聯(lián)網(wǎng)信息服務(wù),為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下,我們?yōu)榭蛻舫兄Z穩(wěn)定,放心的服務(wù),根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后,要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計,我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。
小程序不支持table標(biāo)簽怎么辦
小程序不支持table標(biāo)簽,但是可以使用css的display: table;來實現(xiàn)表格樣式。
推薦學(xué)習(xí):小程序開發(fā)
具體實現(xiàn)如下:
1、通過設(shè)置js里面的數(shù)組對象格式模擬動態(tài)后臺獲取的數(shù)據(jù),然后將數(shù)組對象內(nèi)容以三個元素為一組組成數(shù)組對象格式再合并成一個新的數(shù)組對象格式,之所以這樣做就是為了,一行有三個單元格設(shè)計的:
Page({ data: { tableData: [{ //模擬動態(tài)獲取到的后臺數(shù)據(jù):數(shù)組對象格式 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: '', //模擬將后臺獲取到的數(shù)組對象數(shù)據(jù)按照一行3個的單元數(shù)據(jù)的格式切割成新的數(shù)組對象(簡單的說:比如獲取到數(shù)組是9個元素,切分成,3個元素一組的子數(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:
{{item.name}} {{item.name}}
3、設(shè)置wxss:
.table { display: table; width: 100%; /* border-collapse 屬性設(shè)置表格的邊框是否被合并為一個單一的邊框,解決相鄰單元格邊框未合并導(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; }
效果如下:
以上是“小程序不支持table標(biāo)簽的解決方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!