[Table Splicing] Realize tables with unequal number of rows on the left and right

Effect:

Code:

When you cannot use rowspan and colspan to implement complex tables, you might as well try splicing tables, just make sure the left and right lines are aligned.

<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>