javascript - Adding scroll only to table body with fixed header Angularjs

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 - .

<!DOCTYPE html>
<html>
  <head>
    <script src="angular.min.js"></script>
    <link rel="stylesheet" href="font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body data-ng-app="testApp" data-ng-controller="treeTable" >
    <div class="row">
<div class="col-md-12">
    <div class="tableheight ">
    <table class="treetable-nested childtable">
    <thead>
      <tr>
        <th style="width:5%;">
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> 
        <th >
          Name
        </th>
        <th class="cell-members">
          Version
        </th>
        <th class="cell-members">
          Size
        </th>
        <th class="cell-members">
        Date Modified
        </th>
        <th class="cell-members">
        Labels
        </th>
        <th class="cell-members">
        Description
        </th>
      </tr>
    </thead>
    <tbody class="newRepo" style="font-size:12px" data-ng-repeat="item in list">
        <tr id={{item.id}}>
            <td>
                <button class="accordion" ng-click="displayChildren(item,item.id)"></button><input class='parentCheckbox' ng-model="item.selected" type="checkbox" ng-change = "toggleChildren(item)"/>
            </td>
            <td>
                {{item.name}}
            </td>
            <td class="cell-members">
<!--                {{item.version}} --> 0
            </td>
            <td class="cell-members">
<!--                {{item.size}}-->  0
            </td>
            <td class="cell-members" >
<!--                {{item.date}}-->   0
            </td>
            <td class="cell-members">
                {{item.label}}
            </td>
            <td class="cell-members">
                {{item.description}}
            </td>
        </tr>

        <tr ng-if='item.children && item.children.length > 0'>
            <td colspan="7" id="bundle_1" >
                <table ng-show="item.showTree" class="treetable-nested" style="width:100%;"> 
                    <tbody ng-repeat='bundles in item.children'>
                        <tr id={{bundles.bundleId}} ng-init="parentScope = $parent.$parent;">
                            <td style="width:5%;padding-left:15px;white-space:nowrap"><button class="accordion test" ng-click='showComponents = !showComponents'></button><input ng-model="bundles.selected" ng-change="toggleChildren(bundles, parentScope)" type="checkbox" /></td>
                            <td>{{bundles.bundleName}}</td>
                            <td class="cell-members">{{bundles.bundleVersion}}</td>
                            <td class="cell-members">{{bundles.bundleSize}}</td>
                            <td class="cell-members">{{bundles.bundleModified}}</td>
                            <td class="cell-members">{{bundles.bundleLabels}}</td>
                            <td class="cell-members">{{bundles.bundleDescription}}</td>
                        </tr>
                        <tr ng-show='showComponents' ng-repeat='ponents in bundlesponents' id={{ponents.key}} ng-init="bundleScope = $parent;">
                            <td style="width:5%;padding-left:30px;"><input type="checkbox" ng-model="ponents.selected" ng-change="toggleChildren(ponents, bundleScope)"/></td>
                            <td>{{ponents.value}}</td>
                            <td>{{ponents.Version}}</td>
                            <td>{{ponents.Size}}</td>
                            <td>{{ponents.Modified}}</td>
                            <td>{{ponents.Labels}}</td>
                            <td>{{ponents.Description}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
  </table>
    </div>

</div>

</div>
  </body>

</html>

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 - https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview.

<!DOCTYPE html>
<html>
  <head>
    <script src="angular.min.js"></script>
    <link rel="stylesheet" href="font-awesome.min.css"/>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body data-ng-app="testApp" data-ng-controller="treeTable" >
    <div class="row">
<div class="col-md-12">
    <div class="tableheight ">
    <table class="treetable-nested childtable">
    <thead>
      <tr>
        <th style="width:5%;">
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> 
        <th >
          Name
        </th>
        <th class="cell-members">
          Version
        </th>
        <th class="cell-members">
          Size
        </th>
        <th class="cell-members">
        Date Modified
        </th>
        <th class="cell-members">
        Labels
        </th>
        <th class="cell-members">
        Description
        </th>
      </tr>
    </thead>
    <tbody class="newRepo" style="font-size:12px" data-ng-repeat="item in list">
        <tr id={{item.id}}>
            <td>
                <button class="accordion" ng-click="displayChildren(item,item.id)"></button><input class='parentCheckbox' ng-model="item.selected" type="checkbox" ng-change = "toggleChildren(item)"/>
            </td>
            <td>
                {{item.name}}
            </td>
            <td class="cell-members">
<!--                {{item.version}} --> 0
            </td>
            <td class="cell-members">
<!--                {{item.size}}-->  0
            </td>
            <td class="cell-members" >
<!--                {{item.date}}-->   0
            </td>
            <td class="cell-members">
                {{item.label}}
            </td>
            <td class="cell-members">
                {{item.description}}
            </td>
        </tr>

        <tr ng-if='item.children && item.children.length > 0'>
            <td colspan="7" id="bundle_1" >
                <table ng-show="item.showTree" class="treetable-nested" style="width:100%;"> 
                    <tbody ng-repeat='bundles in item.children'>
                        <tr id={{bundles.bundleId}} ng-init="parentScope = $parent.$parent;">
                            <td style="width:5%;padding-left:15px;white-space:nowrap"><button class="accordion test" ng-click='showComponents = !showComponents'></button><input ng-model="bundles.selected" ng-change="toggleChildren(bundles, parentScope)" type="checkbox" /></td>
                            <td>{{bundles.bundleName}}</td>
                            <td class="cell-members">{{bundles.bundleVersion}}</td>
                            <td class="cell-members">{{bundles.bundleSize}}</td>
                            <td class="cell-members">{{bundles.bundleModified}}</td>
                            <td class="cell-members">{{bundles.bundleLabels}}</td>
                            <td class="cell-members">{{bundles.bundleDescription}}</td>
                        </tr>
                        <tr ng-show='showComponents' ng-repeat='ponents in bundles.ponents' id={{ponents.key}} ng-init="bundleScope = $parent;">
                            <td style="width:5%;padding-left:30px;"><input type="checkbox" ng-model="ponents.selected" ng-change="toggleChildren(ponents, bundleScope)"/></td>
                            <td>{{ponents.value}}</td>
                            <td>{{ponents.Version}}</td>
                            <td>{{ponents.Size}}</td>
                            <td>{{ponents.Modified}}</td>
                            <td>{{ponents.Labels}}</td>
                            <td>{{ponents.Description}}</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
  </table>
    </div>

</div>

</div>
  </body>

</html>

Share asked Feb 7, 2017 at 16:48 shaaa 2351 gold badge7 silver badges22 bronze badges

Can you give a little bit more information, like: vertical ou horizontal scroll? – andrepaulo Commented Feb 7, 2017 at 16:54
@andrepaulo i need vertical scrollbar only to table body section. Currently the vertical scrollbar is for entire table. – shaaa Commented Feb 7, 2017 at 16:55
see if this helps you... stackoverflow./questions/21168521/… – andrepaulo Commented Feb 7, 2017 at 18:56

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Change your thead and tbody to display: block. Set a height for your tbody and set the overflow-y property to scroll:

table thead {
  display: block;
}
table tbody {
  height: 200px;
  display: block;
  overflow-y: scroll;
}

Here's a plunker demonstrating: https://plnkr.co/edit/WXFvwkRyjbVOzAyyEQc0?p=preview

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Adding scroll only to table body with fixed header Angularjs - Stack Overflow

1 Answer 1