微信小程序创建表格

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_43732387/article/details/102669266

微信小程序创建表格

今天小编遇到了这样一个需求，用户想要列表信息，找了好多地方，才发现微信没有H5中的table标签，所以自己画了一个表格。发现效果还不错，分享给大家。以下是我的效果图（内容仅为参考）：

以下是这个样式的wxml代码：

<view class="table" >

    <view class="tab_th">

        <view class="th_td1 th_text"><text>序号</text></view>

        <view class="th_td2 th_text"><text>姓名</text></view>

        <view class="th_td3 th_text"><text>性别</text></view>

        <view class="th_td4 th_text"><text>备注</text></view>

    </view>

    <block >

    <view class="tab_tr">

        <view class="tr_td1 text"><text>1</text></view>

        <view class="tr_td2 text"><text>张飞</text></view>

        <view class="tr_td3 text"><text>男</text></view>

        <view class="tr_td4 text"><text>已婚</text></view>

    </view>

    <view class="tab_tr">

        <view class="tr_td1 text"><text>2</text></view>

        <view class="tr_td2 text"><text>关羽</text></view>

        <view class="tr_td3 text"><text>男</text></view>
    
        <view class="tr_td4 text"><text>已婚</text></view>

    </view>

    <view class="tab_tr">

        <view class="tr_td1 text"><text>3</text></view>

        <view class="tr_td2 text"><text>刘备</text></view>

        <view class="tr_td3 text"><text>男</text></view>

        <view class="tr_td4 text"><text>已婚</text></view>

    </view>
    
    <view class="tab_tr">

        <view class="tr_td1 text"><text>4</text></view>

        <view class="tr_td2 text"><text>赵云</text></view>

        <view class="tr_td3 text"><text>男</text></view>

        <view class="tr_td4 text"><text>已婚</text></view>

    </view>

</block>

</view>

下面是wxss代码：

.table{

    width: 98%;

    border-top: #E8E8E8 solid 1px;

    border-bottom: #E8E8E8 solid 1px;

    position: relative;

    left: 1%;

    color: #333333;

}

.tab_th{

    width: 100%;

    position: relative;

    height: 70rpx;

    border-top: #E8E8E8 solid 1px;

    border-bottom: #E8E8E8 solid 1px;

    background-color: #FAFAFA;

    display: flex;

    align-items: center;
    
    justify-content: center;

}

.th_td1{

    width: 15%;

    height: 70rpx;

    border-top: #E8E8E8 solid 1px;

    border-bottom: #E8E8E8 solid 1px;

    background-color: #FAFAFA;

    display: flex;

    align-items: center;

    justify-content: center;

}

.th_td2{

    width: 40%;

    height: 70rpx;

    border: 1px solid #E8E8E8;

    background-color: #FAFAFA;

    display: flex;

    align-items: center;

    justify-content: center;

}

.th_td3{
    
    width: 25%;

    height: 70rpx;

    border: 1px solid #E8E8E8;

    background-color: #FAFAFA;

    display: flex;

    align-items: center;

    justify-content: center;

}

.th_td4{

    width: 20%;

    height: 70rpx;

    border-top: #E8E8E8 solid 1px;

    border-bottom: #E8E8E8 solid 1px;

    background-color: #FAFAFA;

    display: flex;

    align-items: center;

    justify-content: center;

}

.tab_tr{

    width: 100%;

    position: relative;

    height: 70rpx;

    border-top: #E8E8E8 solid 1px;

    border-bottom: #E8E8E8 solid 1px;

    background-color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

}

.tr_td1{

    width: 15%;

    height: 70rpx;

    border-top: #E8E8E8 solid 1px;

    border-bottom: #E8E8E8 solid 1px;

    background-color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

}

.tr_td2{

    width: 40%;

    height: 70rpx;

    border: 1px solid #E8E8E8;

    background-color:#FFFFFF;

    display: flex;

    align-items: center;
    
    justify-content: center;

}

.tr_td3{

    width: 25%;

    height: 70rpx;

    border: 1px solid#E8E8E8;

    background-color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

}

.tr_td4{

    width: 20%;

    height: 70rpx;

    border-top: #E8E8E8 solid 1px;

    border-bottom: #E8E8E8 solid 1px;

    background-color: #FFFFFF;

    display: flex;

    align-items: center;

    justify-content: center;

}

.text{

    font-size:12px;

    font-family:PingFangHK-Regular,PingFangHK;
    
    font-weight:400;

    color:rgba(51,51,51,1);

    line-height:17px;

}

.th_text{

    font-size:16px;

    font-family:PingFangSC-Regular,PingFang SC;

    font-weight:400;

    color:rgba(51,51,51,1);

    line-height:22px;

}

希望可以帮助到大家，样式仅为参考，大家其实可以自己动手画一个表格，说不定更好！