微信小程序在代碼編寫過程好像不支持原生table的使用,在開發過程中偶爾又得需要拿table來展示。
1.table效果展示
1.wxml
<view class="table-container"><view class="table"><view class="table-row"><view class="table-cell" style="grid-row: span 2; ">序號</view><view class="table-cell" style="grid-row: span 2; ">稅種</view><view class="table-cell " style="grid-column: span 5;">稅 率</view></view><view class="table-row"><view class="table-cell">中國</view><view class="table-cell" style="grid-column: span 2; grid-column: span 3;">老撾其他區域</view><view class="table-cell">老撾磨丁經濟特區</view></view><view class="table-row"><!-- 這個單元格是空的,因為行合并已經在上一行處理 --><view class="table-cell">1</view><view class="table-cell">增值稅(間接稅)</view><view class="table-cell">0%—13%</view><view class="table-cell" style="grid-column: span 3;">企業在購買產品同時需額外支付產品進項價格10%的增值稅</view><view class="table-cell">5%</view></view><view class="table-row"><!-- 這個單元格是空的,因為行合并已經在上一行處理 --><view class="table-cell">2</view><view class="table-cell">企業利潤稅(直接稅)</view><view class="table-cell">5%—25%</view><view class="table-cell" style="grid-column: span 3;">按可收稅利潤(6000萬基普以上)的35%計征。</view><view class="table-cell">0%—12%</view></view><view class="table-row"><!-- 這個單元格是空的,因為行合并已經在上一行處理 --><view class="table-cell">3</view><view class="table-cell">個人所得稅(直接稅)</view><view class="table-cell">3%—45%</view><view class="table-cell" style="grid-column: span 3;">薪金、勞務費、動產和不動產所得、知識產權、專利、商標所得等必須繳納所得稅,具體稅率以30萬基普為起征點,30萬—150萬基普為5%、150萬—400萬基普為10%、400萬—800萬基普為15%、800萬—1500萬基普為20%、1500萬基普以上為25%。外國人按總收入的</view><view class="table-cell">5%</view></view><view class="table-row"><!-- 這個單元格是空的,因為行合并已經在上一行處理 --><view class="table-cell">4</view><view class="table-cell">營業稅(間接稅)</view><view class="table-cell">1.2%—12%</view><view class="table-cell" style="grid-column: span 3;">個人、法人或者機構在老撾境內進行商品買賣和服務時必須按比例繳納營業稅(部分免稅商品除外),繳納比例一般為5%和10%,但出口商品免繳營業稅。</view><view class="table-cell">0.5%</view></view></view></view>
2.css樣式
.table-container {display: flex;justify-content: center;margin-top: 20px;
}.table {display: grid;grid-template-columns: repeat(7, 1fr);/* 三列布局 */gap: 1px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;/* border: 1px solid #ccc; */
}.table-row {display: contents;/* 讓子元素直接參與網格布局 */
}.table-cell {border: 1px solid #ddd;padding: 8px;background-color: #fff;border-right: none;border-bottom: none;display: grid;place-items: center;
}