vue table自定义样式

 工作常见通用table自定义样式

HTML代码块：

        <div class="detail-group-box">
            <div class="detail-group-title">
                <img :src="require('@/assets/images/line.png')">
                <span>xx信息</span>
            </div>
            <el-row :gutter="14">
                <el-col :span="24">
                    <div class="custom-table-info">
                        <table class="custom-table" v-loading="authLoading">
                            <tr>
                                <td class="custom-table-head"><span>xx状态</span></td>
                                <td class="custom-table-head"><span>发起时间</span></td>
                                <td class="custom-table-head"><span>xx时间</span></td>
                            </tr>
                            <tr>
                                <td class="custom-table-td"><span>xx</span></td>
                                <td class="custom-table-td"><span>xx</span></td>
                                <td class="custom-table-td"><span>xx</span></td>
                            </tr>
                        </table>
                    </div>
                </el-col>
            </el-row>
        </div>

style代码块： 

<style scoped lang="scss">
.detail-current-car {
    margin-bottom: 12px;
}

.detail-group-box {
    .detail-group-title {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        margin-bottom: 12px;

        img {
            vertical-align: -2px;
            width: 3px;
            height: 15px;
            margin-right: 5px;
        }
    }

    .detail-item-box {
        display: flex;
        border: 1px solid #F0F0F0;
        border-right: none;
        max-width: 747px;
        margin-bottom: 20px;
    }

    .detail-item {
        display: flex;
        font-size: 14px;
        font-weight: 400;
        line-height: 42px;
    }

    .detail-item-title {
        width: 138px;
        padding-left: 20px;
        background-color: rgba(247, 248, 250, 0.7);
        border-radius: 3px 0px 0px 3px;
        color: #1D2129;
        border-right: 1px solid #F0F0F0;
    }

    .detail-item-info {
        color: #333841;
        width: 215px;
        margin-left: 20px;
        border-right: 1px solid #F0F0F0;
    }
}

.custom-table-info {
    .el-table {
        .cell {
            padding: 0 10px;
        }
    }
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    // border-bottom: 1px solid #F0F0F0;
    border-left: 1px solid #F0F0F0;
    margin-bottom: 30px;

    tr {
        height: 40px;
    }

    td {
        border-right: 1px solid #F0F0F0;
        border-top: 1px solid #F0F0F0;
        border-bottom: 1px solid #F0F0F0;
    }

    .custom-table-head {
        font-size: 16px;
        font-weight: 400;
        color: #909399;
        width: 140px;
        background-color: rgba(247, 248, 250, 0.7);
        padding-left: 20px;
    }

    .custom-table-td {
        width: 200px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        padding: 10px 20px 10px;
    }

    .w180 {
        width: 180px;
    }
}
</style>