title: Proper width Alignment of child table inside parent table in HTML
body: <p>I have created a collapsible HTML nested table.
  But i am not able to set the proper width after so many futile efforts.
  My child table is not fitting to my parent table's head.</p>
  
  <p>Here is the code snippet:
  <a href="https://jsfiddle.net/preetigupta617/bpLkdx13/" rel="nofollow noreferrer">https://jsfiddle.net/preetigupta617/bpLkdx13/</a></p>
  
  <p>Code:
  HTML</p>
  
  <pre><code>&lt;head&gt;
  &lt;script&gt;
  $('.content').css('display','none');
      $( ".collapsible" ).click(function() {
           id = $(this).attr('id');
           num = id.split("_").pop();
          // document.getElementById("mytable_"+num).classList.toggle("show");
            if(document.getElementById("mytable_"+num).style.display=='none') {
                document.getElementById("mytable_"+num).style.display= 'block';
            }
            else {
                document.getElementById("mytable_"+num).style.display= 'none'
            }
           console.log(num);
           console.log(document.getElementById("mytable_"+num).innerHTML);
  &lt;/script&gt;
    &lt;style&gt;
     table {border-collapse:collapse; table-layout:fixed; width:310px;}
     table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
      /* Style the button that is used to open and close the collapsible content */
  .collapsible {
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible:hover {
    background-color: #ccc;
  }
  
  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
        &lt;table style='width:80%;margin:0 auto;' border='1' bordercolor='BLACK'&gt;               
          &lt;thead &gt;                                                                             
           &lt;tr class='w3-cyan'&gt;&lt;th&gt;S.no&lt;/th&gt;&lt;th&gt;Command&lt;/th&gt;&lt;th&gt;Failure Reasons&lt;/th&gt;&lt;th&gt;Testcase Affected&lt;/th&gt;&lt;th&gt;Response&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
  &lt;tr id='myBtn_1' class='collapsible'&gt;&lt;td&gt;1&lt;/td&gt;&lt;td colspan=4&gt;build_model&lt;/td&gt;&lt;/tr&gt;                                                        
  &lt;tr &gt;                                                                                                                                     
  &lt;td colspan=1&gt;&lt;/td&gt;&lt;td colspan=1&gt;&lt;/td&gt;                                                                                                    
  &lt;td  id='mytable_1' class='content' colspan=3&gt;&lt;table&gt;                                                                                     
  &lt;tr&gt;&lt;td&gt;MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_model-MACHINE_ERROR-OTHER_INFO-WARNINGS-PATTERN_VAR'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Regold&lt;/td&gt;&lt;/tr&gt;                                                       
  &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;                                                                                                                          
  &lt;tr id='myBtn_2' class='collapsible'&gt;&lt;td&gt;2&lt;/td&gt;&lt;td colspan=4&gt;build_testmode&lt;/td&gt;&lt;/tr&gt;                                                       
  &lt;tr &gt;                                                                                                                                       
  &lt;td colspan=1&gt;&lt;/td&gt;&lt;td colspan=1&gt;&lt;/td&gt;                                                                                                      
  &lt;td  id='mytable_2' class='content' colspan=3&gt;&lt;table&gt;                                                                                       
  &lt;tr&gt;&lt;td&gt;OTHER_INFO,COVERAGE_VAR&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-OTHER_INFO-COVERAGE_VAR'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Open CCR&lt;/td&gt;&lt;/tr&gt;                                                                                              
  &lt;tr&gt;&lt;td&gt;CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-CORE-TESTCASE_ERRORS-CRITICAL_ERRORS-MACHINE_ERROR-PATTERN_VAR-COVERAGE_VAR'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Fix Testcase&lt;/td&gt;&lt;/tr&gt;                                                                                                                              
  &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;                                                                                                                          
  &lt;tr id='myBtn_3' class='collapsible'&gt;&lt;td&gt;3&lt;/td&gt;&lt;td colspan=4&gt;commit_tests&lt;/td&gt;&lt;/tr&gt;                                                         
  &lt;tr &gt;                                                                                                                                       
  &lt;td colspan=1&gt;&lt;/td&gt;&lt;td colspan=1&gt;&lt;/td&gt;                                                                                                      
  &lt;td  id='mytable_3' class='content' colspan=3&gt;&lt;table&gt;                                                                                       
  &lt;tr&gt;&lt;td&gt;MACHINE_ERROR,WARNINGS&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/commit_tests-MACHINE_ERROR-WARNINGS'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Rerun&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id='myBtn_4' class='collapsible'&gt;&lt;td&gt;4&lt;/td&gt;&lt;td colspan=4&gt;create_logic_tests&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
  &lt;td colspan=1&gt;&lt;/td&gt;&lt;td colspan=1&gt;&lt;/td&gt;
  &lt;td  id='mytable_4' class='content' colspan=3&gt;&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;CORE,OTHER_INFO,COVERAGE_VAR&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-OTHER_INFO-COVERAGE_VAR'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Regold&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-CRITICAL_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-PATTERN_VAR-COVERAGE_VAR'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Rerun&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id='myBtn_5' class='collapsible'&gt;&lt;td&gt;5&lt;/td&gt;&lt;td colspan=4&gt;diagnose_failures&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
  &lt;td colspan=1&gt;&lt;/td&gt;&lt;td colspan=1&gt;&lt;/td&gt;
  &lt;td  id='mytable_5' class='content' colspan=3&gt;&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/diagnose_failures-TESTCASE_ERRORS-CRITICAL_ERRORS-PATTERN_VAR-COVERAGE_VAR'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Rerun&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id='myBtn_6' class='collapsible'&gt;&lt;td&gt;6&lt;/td&gt;&lt;td colspan=4&gt;verify_test_structures&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
  &lt;td colspan=1&gt;&lt;/td&gt;&lt;td colspan=1&gt;&lt;/td&gt;
  &lt;td  id='mytable_6' class='content' colspan=3&gt;&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/verify_test_structures-TESTCASE_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-COVERAGE_VAR'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Open CCR&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id='myBtn_7' class='collapsible'&gt;&lt;td&gt;7&lt;/td&gt;&lt;td colspan=4&gt;write_toggle_gram&lt;/td&gt;&lt;/tr&gt;
  &lt;tr &gt;
  &lt;td colspan=1&gt;&lt;/td&gt;&lt;td colspan=1&gt;&lt;/td&gt;
  &lt;td  id='mytable_7' class='content' colspan=3&gt;&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;CORE&lt;/td&gt;&lt;td&gt;&lt;a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/write_toggle_gram-CORE'&gt;1&lt;/a&gt;&lt;/td&gt;&lt;td&gt; Fix Testcase&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;  
  &lt;/body&gt;
  </code></pre>
  
  <p>PS:You can also use the jsfiddle link i have given in post too.
      The foldable HTML table is working in actual but not in jsfiddle site.</p>
  
  <p>But i want help only in case of css,i.e i want to set the child table in last 3 columns properly.How can i achieve that?
  I tried , but end up only scratching my head .</p>
  
  <p>Thanks in advance !!</p>
  
  <p><a href="https://i.stack.imgur.com/nPHhw.png" rel="nofollow noreferrer">[Output with this current code]<a href="https://i.stack.imgur.com/nPHhw.png" rel="nofollow noreferrer">1</a></a></p>