Hinzufügen von nur zum Tabellenkörper mit festen Header scroll. Angularjs

Ich würde wissen, wie ich die Rolle nur zum Tabellenkörper mit festen Header hinzufügen kann. Ich habe viele Beispiele mit jQuery durchgespielt, aber ich möchte es auf eckige Weise machen. Hier ist mein Plunkr - https://plnkr.co/edit/LzJKGdaQJBNsgmUkOYti?p=preview.Hinzufügen von nur zum Tabellenkörper mit festen Header scroll. Angularjs

<!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='components in bundles.components' id={{components.key}} ng-init="bundleScope = $parent;"> 
          <td style="width:5%;padding-left:30px;"><input type="checkbox" ng-model="components.selected" ng-change="toggleChildren(components, bundleScope)"/></td> 
          <td>{{components.value}}</td> 
          <td>{{components.Version}}</td> 
          <td>{{components.Size}}</td> 
          <td>{{components.Modified}}</td> 
          <td>{{components.Labels}}</td> 
          <td>{{components.Description}}</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
    </table> 
    </div> 

</div> 

</div> 
    </body> 

</html>

Quelle

2017-02-07 shaaa

Können Sie ein wenig mehr Informationen geben, wie: vertikale ou horizontale Scroll? – andrepaulo

@andrepaulo Ich brauche vertikale Bildlaufleiste nur zum Tabellenkörperabschnitt. Derzeit ist die vertikale Bildlaufleiste für die gesamte Tabelle. – shaaa

sehen, ob dies Ihnen hilft ... http://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap – andrepaulo

-1

Ihre thead ändern und tbody-display: block. Stellen Sie eine Höhe für Ihre tbody und stellen Sie die overflow-y Eigenschaft scroll:

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

Hier ist ein Plunker demonstriert: https://plnkr.co/edit/WXFvwkRyjbVOzAyyEQc0?p=preview

Quelle

2017-02-07 21:34:12

Hinzufügen von nur zum Tabellenkörper mit festen Header scroll. Angularjs

Antwort

Verwandte Themen