在 table 行中添加垂直滚动

Question

我需要的是添加垂直滚动，例如，如果高度超过 200px。我尝试了一些解决方案，将 <tr> 包装在 <div> 标签中并添加 overflow-y.. 但没有成功。我还尝试将垂直滚动直接添加到 table，但我只需要在 <tr> 中滚动复选框而不是整个 table。以下是我的代码和我尝试过的代码：

HTML

<script type="text/ng-template" id="field_renderer.html">
  <table class="table table-scroll">
    <thead ng-show="data.name === 'Location'">
      <td class="noBorder" colspan="2">
        <button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
          Regions</button>
        <button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
          State/Territory</button>
      </td>
    </thead>
    <tbody>
      <tr ng-if="data.children.length > 0 && !$parent.$parent.$parent.data">
        <td class="noBorder" colspan="2">
          <a href="javascript:;" class="btn btn-default-off btn-xs select-all" data-ng-click="reportsvm.selectAll(data)">Select All</a>
          <a href="javascript:;" class="btn btn-default-off btn-xs reset-all" data-ng-click="reportsvm.clearAll(data)">Clear All</a>
        </td>
      </tr>
      <tr ng-repeat-start="data in data.children">
        <td class="noBorder">
          <label>
            <input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data, $parent.$parent.$parent)" ng-model="data.isSelected">
            <span class="clickable">{{data.name}}</span>
          </label>
        </td>
        <td class="noBorder clickable">
          <span ng-if="data.children.length > 0">
            <i data-ng-click="reportsvm.showChildDetails(data, $parent.$parent.$parent)" ng-class="{'glyphicon glyphicon-chevron-right': !data.showDetails, 'glyphicon glyphicon-chevron-down': data.showDetails}"></i>
          </span>
        </td>
      </tr>
      <tr ng-repeat-end ng-if="data.showDetails">
        <td class="noBorder" ng-include="'field_renderer.html'"></td>
      </tr>
    </tbody>
  </table>
</script>
<div class="panel-group">
  <div class="panel panel-default">
    <div ng-repeat-start="data in reportsvm.modifiedFilters" class="panel panel-default">
      <div class="panel-heading clickable" data-ng-click="reportsvm.showDetails(data)">
        <h4 class="panel-title">
          <a href="">{{data.name}}</a>
          <i ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
         </h4>
      </div>
    </div>
    <div class="panel-body small" ng-if="data.showDetails" ng-repeat-end ng-include="'field_renderer.html'"></div>
  </div>

CSS

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

结果

所以我希望仅在 selectAll/Clear 所有按钮不完整 body 之后才滚动 body。

数据

[{
  "name": "Location",
  "showRegions": true,
  "children": [{
    "isSelected": true,
    "name": "New Jersey",
    "category": "NERO"
  }, {
    "isSelected": true,
    "name": "Pennsylvania",
    "category": "MARO"
  }, {
    "isSelected": true,
    "name": "Connecticut",
    "category": "NERO"
  }, {
    "isSelected": true,
    "name": "Delaware",
    "category": "MARO"
  }]
}, {
  "name": "Review Status",
  "children": [{
    "isSelected": true,
    "name": "Planned",
    "children": []
  }, {
    "isSelected": true,
    "name": "Pre-Review",
    "children": []
  }, {
    "isSelected": true,
    "name": "Field Work Conducted",
    "children": []
  }]
}]

PLUNKER

https://plnkr.co/edit/CKZ9DeHee4pk7GUjVim2?p=preview

Answer 1

将复选框包装在不同的行中，并为其分配 height 和 overflow 可能不起作用。

如果您将所有复选框包装在一个容器元素中并将其分配给它，那就太好了。

我在这里创建了一个简单的代码笔link。

Link

HTML:

<table>
  <tr>
    <td>Table Header</td>
    <td>Table Header</td>
  </tr>
  <tr>
  <td colspan="2">
     <div>
       Your all check box here
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia repellat voluptas, alias, culpa rerum voluptate cupiditate tenetur vitae maiores consequuntur tempora hic error, commodi soluta officiis eaque magnam doloremque illo.
    </div>
    </td>
  </tr>
</table>

CSS:

div{
  max-width:200px;
  height: 100px;
  overflow-y:scroll;
}

Answer 2

I want scroll to be only after selectAll/Clear All buttons not whole body.

在这种情况下，将 selectAll/Clear 按钮移动到 <tbody> 上方的 <thead> 行：

   <table class="table">
        <thead ng-show="data.name === 'Location'">
            <td class="noBorder" colspan="2">
                <button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
                    Regions</button>
                <button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
                    State/Territory</button>
            </td>
        </thead>
        <!-- Put selectAll/clearAll buttons here -->
        <thead ng-if="data.children.length > 0 && !$parent.$parent.$parent.data">
            <td class="noBorder" colspan="2">
                <a href="javascript:;" class="btn btn-default-off btn-xs select-all" data-ng-click="reportsvm.selectAll(data)">Select All</a>
                <a href="javascript:;" class="btn btn-default-off btn-xs reset-all" data-ng-click="reportsvm.clearAll(data)">Clear All</a>
            </td>
        </thead>

        <tbody class="table-scroll">
        <!-- Remove selectAll/clearAll buttons
        <tr ng-if="data.children.length > 0 && !$parent.$parent.$parent.data">
            <td class="noBorder" colspan="2">
                <a href="javascript:;" class="btn btn-default-off btn-xs select-all" data-ng-click="reportsvm.selectAll(data)">Select All</a>
                <a href="javascript:;" class="btn btn-default-off btn-xs reset-all" data-ng-click="reportsvm.clearAll(data)">Clear All</a>
            </td>
        </tr>
        -->
        <tr ng-repeat-start="data in data.children">
            <td class="noBorder">
                <label>
                    <input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data, $parent.$parent.$parent)" ng-model="data.isSelected">
                    <span class="clickable">{{data.name}}</span>
                </label>
            </td>

DEMO on PLNKR.

在 table 行中添加垂直滚动

Add vertical scroll in table row

javascript

css

html-table

vertical-scrolling

angularjs