仿table标签，微信小程序个鬼不支持，所以只能用其它方法替代

发布日期： 2025-03-31 15:18 阅读量： 92 来源： 互联网

<view class="tr bg-w">
                        <view class="th">单板数量</view>
                        <view class="th">总张数</view>
                        <view class="th">坏板数量</view>
                        <view class="th">加板数量</view>
                        <view class="th">单价</view>
                    </view>
                    <view class="tr">
                        <view class="td">{{ item.danbannum }}</view>
                        <view class="td">{{ item.zhenbannum }}</view>
                        <view class="td">{{ item.huaibannum }}</view>
                        <view class="td">{{ item.jiabannum }}</view>
                        <view class="td">{{ item.unitprice }}</view>
                    </view>

table {
    width: 100%;
    border-collapse: collapse;
    border: 0.5px solid #e9e9e9;
}

th,
td {
    border: 0.5px solid #e9e9e9;
    height: 2rem;
    line-height: 1.5;
    text-align: center;
}

th {
    background-color: #fbfbfb;
}

.table {
    border: 0px solid darkgray;
    font-size: 12px;
    width: 100%;
}

.tr {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 2rem;
    align-items: center;
}

.td,
.th {
    width: 20%;
    justify-content: center;
    text-align: center;
    border-collapse: collapse;
    border: 0.5px solid #e9e9e9;
    height: 2rem;
    line-height: 2rem;
}

.bg-w {
    background: #fbfbfb;
}

上一篇：: vscode编辑php时，加上代码追踪功能，方便查找

下一篇：: fastadmin 本地插件安装教程

仿table标签，微信小程序个鬼不支持，所以只能用其它方法替代

随便看看