title: Adding scroll only to table body with fixed header Angularjs
body: <p>I would to know how can i add the scroll only to table body with fixed header. I have gone through many examples using jquery but i want to do it in Angular way. Here is my  plunkr - <a href="https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview</a>.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src="angular.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="font-awesome.min.css"/&gt;
      &lt;link rel="stylesheet" href="bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body data-ng-app="testApp" data-ng-controller="treeTable" &gt;
      &lt;div class="row"&gt;
  &lt;div class="col-md-12"&gt;
      &lt;div class="tableheight "&gt;
      &lt;table class="treetable-nested childtable"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th style="width:5%;"&gt;
            &lt;input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /&gt;
          &lt;/th&gt; 
          &lt;th &gt;
            Name
          &lt;/th&gt;
          &lt;th class="cell-members"&gt;
            Version
          &lt;/th&gt;
          &lt;th class="cell-members"&gt;
            Size
          &lt;/th&gt;
          &lt;th class="cell-members"&gt;
          Date Modified
          &lt;/th&gt;
          &lt;th class="cell-members"&gt;
          Labels
          &lt;/th&gt;
          &lt;th class="cell-members"&gt;
          Description
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="newRepo" style="font-size:12px" data-ng-repeat="item in list"&gt;
          &lt;tr id={{item.id}}&gt;
              &lt;td&gt;
                  &lt;button class="accordion" ng-click="displayChildren(item,item.id)"&gt;&lt;/button&gt;&lt;input class='parentCheckbox' ng-model="item.selected" type="checkbox" ng-change = "toggleChildren(item)"/&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  {{item.name}}
              &lt;/td&gt;
              &lt;td class="cell-members"&gt;
  &lt;!--                {{item.version}} --&gt; 0
              &lt;/td&gt;
              &lt;td class="cell-members"&gt;
  &lt;!--                {{item.size}}--&gt;  0
              &lt;/td&gt;
              &lt;td class="cell-members" &gt;
  &lt;!--                {{item.date}}--&gt;   0
              &lt;/td&gt;
              &lt;td class="cell-members"&gt;
                  {{item.label}}
              &lt;/td&gt;
              &lt;td class="cell-members"&gt;
                  {{item.description}}
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr ng-if='item.children &amp;&amp; item.children.length &gt; 0'&gt;
              &lt;td colspan="7" id="bundle_1" &gt;
                  &lt;table ng-show="item.showTree" class="treetable-nested" style="width:100%;"&gt; 
                      &lt;tbody ng-repeat='bundles in item.children'&gt;
                          &lt;tr id={{bundles.bundleId}} ng-init="parentScope = $parent.$parent;"&gt;
                              &lt;td style="width:5%;padding-left:15px;white-space:nowrap"&gt;&lt;button class="accordion test" ng-click='showComponents = !showComponents'&gt;&lt;/button&gt;&lt;input ng-model="bundles.selected" ng-change="toggleChildren(bundles, parentScope)" type="checkbox" /&gt;&lt;/td&gt;
                              &lt;td&gt;{{bundles.bundleName}}&lt;/td&gt;
                              &lt;td class="cell-members"&gt;{{bundles.bundleVersion}}&lt;/td&gt;
                              &lt;td class="cell-members"&gt;{{bundles.bundleSize}}&lt;/td&gt;
                              &lt;td class="cell-members"&gt;{{bundles.bundleModified}}&lt;/td&gt;
                              &lt;td class="cell-members"&gt;{{bundles.bundleLabels}}&lt;/td&gt;
                              &lt;td class="cell-members"&gt;{{bundles.bundleDescription}}&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr ng-show='showComponents' ng-repeat='components in bundles.components' id={{components.key}} ng-init="bundleScope = $parent;"&gt;
                              &lt;td style="width:5%;padding-left:30px;"&gt;&lt;input type="checkbox" ng-model="components.selected" ng-change="toggleChildren(components, bundleScope)"/&gt;&lt;/td&gt;
                              &lt;td&gt;{{components.value}}&lt;/td&gt;
                              &lt;td&gt;{{components.Version}}&lt;/td&gt;
                              &lt;td&gt;{{components.Size}}&lt;/td&gt;
                              &lt;td&gt;{{components.Modified}}&lt;/td&gt;
                              &lt;td&gt;{{components.Labels}}&lt;/td&gt;
                              &lt;td&gt;{{components.Description}}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>