Question

我想知道如何将滚动仅添加到具有固定标题的表格主体。我使用jquery经历了很多例子，但我想以Angular的方式做。这是我的傻瓜 - 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='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>

Answer 1

将您的thead和tbody更改为display: block。设置tbody的高度，并将overflow-y属性设置为scroll：

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

这是一名示威者：https://plnkr.co/edit/WXFvwkRyjbVOzAyyEQc0?p=preview

仅使用固定标题Angularjs向表体添加滚动

1 个答案: