title: HTML Table nested json data to show in table
body: <p><a href="https://i.stack.imgur.com/3e10B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3e10B.png" alt="How to achieve the table above?"></a></p>
  
  <p>How to achieve the above image? The json is like this</p>
  
  <pre><code>{"track":
     {"category1":
          {"skill": "skill1","skill2","skill3","skill4"}
     }
     {"category2":
         {"skill":"skill1","skill2","skill3","skill4"}
     }
  } 
  </code></pre>
  
  <p>Here is what I already tried so far. I don't get how to make the 3rd column.</p>
  
  <pre><code>&lt;table class="table table-striped table-condensed table-bordered table-overflow"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th style="text-align:center" width="33%"&gt;Track&lt;/th&gt;
                  &lt;th style="text-align:center" width="33%"&gt;Category&lt;/th&gt;
                  &lt;th style="text-align:center" width="33%"&gt;Skills&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td rowspan="{{addTCS.trackSpan}}" style="vertical-align:middle;"&gt;
                      &lt;input type="text" class="form-control" style="max-width: none;" name="track"/&gt;
                  &lt;/td&gt;
                  &lt;td colspan="2" style="vertical-align:middle;"&gt;
                      &lt;table class="table borderless"&gt;
                          &lt;tbody id="categoryContainer"&gt;
                              &lt;tr style="background-color: #f9f9f9;"&gt;
                                  &lt;td width="33%"&gt;&lt;input type="text" class="form-control" style="max-width: none;" name="category" /&gt;&lt;/td&gt;
  
                                  &lt;td id="skillParentContainer" width="33%"&gt;
                                      &lt;table class="table borderless"&gt;
                                          &lt;tbody id="skillContainer"&gt;
                                              &lt;tr style="background-color: #f9f9f9;"&gt;
                                                  &lt;td&gt;&lt;input type="text" class="form-control" style="max-width: none;" name="category" /&gt;&lt;/td&gt;
                                              &lt;/tr&gt;
                                          &lt;/tbody&gt;
                                          &lt;tfoot style="background-color: #f9f9f9;"&gt;
                                              &lt;tr&gt;&lt;td&gt;&lt;small&gt;&lt;a href="" class="text-primary pull-right" ng-click="addTCS.addSkill()"&gt;+ Add Skill&lt;/a&gt;&lt;/small&gt;&lt;/td&gt;&lt;/tr&gt;
                                          &lt;/tfoot&gt;
                                      &lt;/table&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                          &lt;tfoot style="background-color: #f9f9f9;"&gt;
                              &lt;tr&gt;&lt;td&gt;&lt;small&gt;&lt;a href="" class="text-primary pull-right" ng-click="addTCS.addCategory()"&gt;+ Add Category&lt;/a&gt;&lt;/small&gt;&lt;/td&gt;&lt;/tr&gt;
                          &lt;/tfoot&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>