title: Rows within a row in Angular JS table with ng-repeat
body: <p>I have a table like so. Within each program, I have multiple forms. Each form has a name, a Default YES/NO field (the tick mark if yes) and a status field ACTIVE/INACTIVE. </p>
  
  <p>The problem is however that my current code messes up the alignment. The red lines indicate all the items that should be aligned in a single row.  </p>
  
  <p><img src="https://i.stack.imgur.com/Npqub.png" alt="Screenshot of table"></p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;div class="scrollContainer"&gt;
  &lt;div class="fixedHeaderSection"&gt;
      &lt;table class="table columnHeadings" style="table-layout: fixed"&gt;
          &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td class="col-md-4 col-sm-4 col-xs-4"&gt;
                  Program
              &lt;/td&gt;
              &lt;td class="col-md-4 col-sm-4 col-xs-4"&gt;
                  Forms
              &lt;/td&gt;
              &lt;td class="col-md-1 col-sm-1 col-xs-1"&gt;
              &lt;/td&gt;
              &lt;td class="col-md-3 col-sm-3 col-xs-3"&gt;
                  Status
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="scrollableSection"&gt;
      &lt;table class="table columnData" style="table-layout: fixed"&gt;
          &lt;tr ng-repeat="program in programsList"&gt;
              &lt;td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4"&gt;
                  {{program.name}}
              &lt;/td&gt;
              &lt;td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4"&gt;
                  &lt;li ng-repeat="form in program.forms" style="list-style:none;"&gt;
                      {{form.name}}
                  &lt;/li&gt;
                  + New Form
              &lt;/td&gt;
              &lt;td style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1"&gt;
                  &lt;li ng-repeat="form in program.forms" style="list-style:none;"&gt;
                      &lt;span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"&gt;&lt;/span&gt;
                  &lt;/li&gt;
              &lt;/td&gt;
              &lt;td style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3"&gt;
                  &lt;li ng-repeat="form in program.forms" style="list-style:none;"&gt;
                      {{form.status}}
                  &lt;/li&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>How do I fix this?</p>