[Tabellenspleißen] Realisieren Sie Tabellen mit ungleicher Anzahl von Zeilen links und rechts

Wirkung:

Code:

Wenn Sie rowspan und colspan nicht zum Implementieren komplexer Tabellen verwenden können, können Sie auch versuchen, die Tabellen zu verbinden. Stellen Sie dabei nur sicher, dass die linken und rechten Zeilen ausgerichtet sind.

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