【表格拼接】实现左右行数不等表格

效果：

代码：

当无法使用rowspan、colspan实现复杂表格时，不妨试试拼接表格，注意左右线对其即可。

<template>
    <div class="main-table">
        <table class="left">
            <tr>
                <th colspan="2">受入</th>
                <th colspan="2">检收</th>
                <th colspan="2">在库</th>
            </tr>
            <tr>
                <td width="50/12">T侧</td>
                <td width="100/12"></td>
                <td width="50/12">T侧</td>
                <td width="100/12"></td>
                <td width="50/12">储位</td>
                <td width="100/12"></td>
            </tr>
            <tr>
                <td width="50/12">C侧</td>
                <td width="100/12"></td>
                <td width="50/12">C侧</td>
                <td width="100/12"></td>
                <td width="50/12" rowspan="2">实物</td>
                <td width="100/12" rowspan="2"></td>
            </tr>
            <tr>
                <td width="50/12" >F侧</td>
                <td width="100/12" ></td>
                <td width="50/12" >F侧</td>
                <td width="100/12" ></td>
            </tr>
            <tr style="height: 15.3%;">
                <td width="50/12" rowspan="2">K侧</td>
                <td width="100/12" rowspan="2"></td>
                <td width="50/12" rowspan="2">K侧</td>
                <td width="100/12" rowspan="2"></td>
                <td width="50/12">储位</td>
                <td width="100/12"></td>
            </tr>
            <tr style="height: 15%;">
                <td width="50/12">实物</td>
                <td width="100/12"></td>
            </tr>
        </table>
        <table class="right">
            <tr>
                <th colspan="2">供给</th>
            </tr>
            <tr>
                <td width="50/12">顺引</td>
                <td width="100/12"></td>
            </tr>
            <tr>
                <td width="50/12">顺建</td>
                <td width="100/12"></td>
            </tr>
            <tr>
                <td width="50/12">顺建</td>
                <td width="100/12"></td>
            </tr>
            <tr>
                <td width="50/12">顺建</td>
                <td width="100/12"></td>
            </tr>
            <tr>
                <td width="50/12">顺建</td>
                <td width="100/12"></td>
            </tr>
            <tr>
                <td width="50/12">顺建</td>
                <td width="100/12"></td>
            </tr>
        </table>
    </div>
</template>



<script>
    export default {
        props: {
            context: Object,
            data: {
                default: ''
            }
        },
        data() {
            return {
                message: '',
                timer: '',

            }
        },
        mounted() {},
        methods: {
        }
    }
</script>

<style>
    .main-table{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
    }
    .main-table .left{
        width: 75%;
    }
    .main-table .right{
        width: 25%;
    }
    .main-table table
    {
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
    }
    .main-table table th
    {
        background-color: #E9EBF0;
        border: 1px solid #D6DAE0;
        color: #666;
        height: 8%;
    }
    .main-table table td
    {
        border: 1px solid #D6DAE0;
        color: #666;
    }

</style>