Proper width Alignment of child table inside parent table in HTML

Question

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.

Here is the code snippet: https://jsfiddle.net/preetigupta617/bpLkdx13/

Code: HTML



  


                     
                                                                                     
         S.no Command Failure Reasons Testcase Affected Response
1 build_model                                                        
                                                                                                                                     
                                                                                                    
                                                                                     
MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR 1  Regold                                                       
                                                                                                                          
2 build_testmode                                                       
                                                                                                                                       
                                                                                                      
                                                                                       
OTHER_INFO,COVERAGE_VAR 1  Open CCR                                                                                              
CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR 1  Fix Testcase                                                                                                                              
                                                                                                                          
3 commit_tests                                                         
                                                                                                                                       
                                                                                                      
                                                                                       
MACHINE_ERROR,WARNINGS 1  Rerun

4 create_logic_tests



CORE,OTHER_INFO,COVERAGE_VAR 1  Regold
CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR 1  Rerun

5 diagnose_failures



TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR 1  Rerun

6 verify_test_structures



TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR 1  Open CCR

7 write_toggle_gram



CORE 1  Fix Testcase

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.

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 .

Thanks in advance !!

[Output with this current code]1

Kosh · Accepted Answer

Here you are:

$(".collapsible").click(function() {
  $(this).next('tr').toggle();
});

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 80%;
  margin: 0 auto;
}

th {
  border: solid 1px;
}

table td {
  border: solid 1px #fab;
  width: 100px;
  word-wrap: break-word;
}

table table {
  width: 100%;
}


/* 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;
}

.collapsible+tr:not(:nth-child(2)) {
  display: none
}


/* 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;
  overflow: hidden;
  background-color: #f1f1f1;
}



  
    Regression Results
  


  
    
      S.no
      Command
      Failure Reasons
      Testcase Affected
      Response
    
  
  
    
      1
      build_model
    
    
      
      
      
        
          
            
              MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR
              1
               Regold
            
          
        
      
    
    
      2
      build_testmode
    
    
      
      
      
        
          
            
              OTHER_INFO,COVERAGE_VAR
              1
               Open CCR
            
            
              CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR
              1
               Fix Testcase
            
          
        
      
    
    
      3
      commit_tests
    
    
      
      
      
        
          
            
              MACHINE_ERROR,WARNINGS
              1
               Rerun
            
          
        
      
    
    
      4
      create_logic_tests
    
    
      
      
      
        
          
            
              CORE,OTHER_INFO,COVERAGE_VAR
              1
               Regold
            
            
              CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR
              1
               Rerun
            
          
        
      
    
    
      5
      diagnose_failures
    
    
      
      
      
        
          
            
              TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR
              1
               Rerun
            
          
        
      
    
    
      6
      verify_test_structures
    
    
      
      
      
        
          
            
              TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR
              1
               Open CCR
            
          
        
      
    
    
      7
      write_toggle_gram
    
    
      
      
      
        
          
            
              CORE
              1
               Fix Testcase

Proper width Alignment of child table inside parent table in HTML

Answers (2)

Related Questions