I have a LWC table which groups records by Custom Field 1. I created a wrapper class that handles the values to be displayed on the table. So far, values up to Custom Field 4 are aligned properly.

Problem starts on Custom Field 5 onwards as values are displayed on the next row.

Here is the expected output:


Meanwhile, below is the actual result I've been getting:



Below is the current code I am working on:

<template>  
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th scope="col" rowspan="2">
                    <div class="slds-truncate" title="customField1">Custom Field 1</div>
                </th>
                <th scope="col" rowspan="2">
                    <div class="slds-truncate" title="customField2">Custom Field 2</div>
                </th>
                <th scope="col" rowspan="2">
                    <div class="slds-truncate" title="customField3">Custom Field 3</div>
                </th>
                <th scope="col" rowspan="2">
                    <div class="slds-truncate" title="customField4">Custom Field 4</div>
                </th> 
                <th scope="col" colspan="4">
                    <center><div class="slds-truncate" title="someText">NOT A FIELD, JUST SOME TEXT</div></center>
                </th>    
            </tr>
            <tr>  
                <th><div>Custom Field 5</div></th>
                <th><div>Custom Field 6</div></th>
                <th><div>Custom Field 7</div></th>
                <th><div>Custom Field 8</div></th>
            </tr>

        </thead>
        <tbody>
            <template if:true={mapData}>
                <template for:each={mapData} for:item="keyValue">
                    <tr key={keyValue.key} class="slds-hint-parent">
                        <th scope="col">
                            <div>{keyValue.key}</div>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue">
                                <div key={mapValue.customField2}>
                                    {mapValue.customField2}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue2">
                                <div key={mapValue2.customField3}>
                                    {mapValue2.customField3}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue3">
                                <div key={mapValue3.customField4}>
                                    {mapValue3.customField4}
                                </div> 
                            </template>
                        </th>
                    </tr>
                    <tr key={keyValue.key} class="slds-hint-parent"> 
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue4">
                                <div key={mapValue4.customField5}>
                                    {mapValue4.customField5}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue5">
                                <div key={mapValue5.customField6}>
                                    {mapValue5.customField6}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue6">
                                <div key={mapValue6.customField7}>
                                    {mapValue6.customField7}
                                </div> 
                            </template>
                        </th>
                        <th scope="col">
                            <template for:each={keyValue.value} for:item="mapValue7">
                                <div key={mapValue7.customField8}>
                                    {mapValue7.customField8}
                                </div> 
                            </template>
                        </th>
                    </tr> 
                </template>
            </template> 
        </tbody>
    </table>
</template>