Table inside another table is rendering in first td, not all colunms in lightning component

Question

I have a table to show a wrapper list of data. Also, collapse/Hide another (Child record list) table onclick of table row. When I click on a row, the table is showing in the first td length/section only. not full column length. Check the screenshot below.

Here is the markup

<table class="slds-table slds-table_bordered slds-border_right slds-border_left slds-border_top">
<thead>
<tr>
    all header colunms td scope="col"</tr>
</thead>
<tbody>
  <aura:iteration items="{!invLineItem.subWrapList}" var="childLineItem" indexVar="index">
        <tr data-myid="{!childLineItem.invLineItemObj.blusyn__position__c}" 
            onclick="{!c.expandChildItems}"
            style="cursor: pointer;"> <!-- onclick="{!c.expandChildItems}" id="{!childLineItem.blusyn__position__c}"> -->
            all rows td scope="row"
        </tr>
      
        <table class="slds-table"
               id="{!childLineItem.invLineItemObj.blusyn__position__c}" 
               style="display:none;"> 
            <aura:iteration items="{!childLineItem.subChildInvLineItemList}" 
                            var="subChildLineItem">
                <tr style="background-color:gray;"> 
                    all rows td scope="row"
                </tr>
            </aura:iteration>
        </table> 
    </aura:iteration>
</tbody></table>

controller to show and hide the table

expandChildItems : function(component, event, helper){
    var positionId = event.currentTarget.dataset.myid;
    var x = document.getElementById(positionId);
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
 },

hide and collapse function is working fine. Please let me know what can I do to get the table properly show in the main table. Thank you.

Answer 1

Fundamentally you need to ensure the structure generated is valid, ensuring that the nested table is itself in a td, and that the nested table's containing td is set to span all the (relevant) columns in the outer table. For example, when generating an outer table with three columns, you can have the inner table span all three by doing something like this (minimum markup required just to illustrate):

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td colspan="3">
      <table style="width: 100%">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The crucial point here is that the nested table is requested to take 100% of the available width and that the available width is the span of all columns in the outer table. If I add border="1" to the two tables and render my example markup you see:

Answer 2

Wrap your inner table in a table row + td, and make it 100%

<tr><td>
  <table class="slds-table" style="display:none; width:100%;">
    ...inner table stuff     
  </table>
</tr></td> 

You may also need to specify the colspan in the td if it doesn't fill its parent.