在表格行中添加垂直滚动

Question

我需要添加垂直滚动，例如如果高度超过 200 像素。我尝试使用一些解决方案将<tr> 包裹在<div> 标记中并添加溢出-y.. 但没有成功。我还尝试直接向表格添加垂直滚动，但我只需要在<tr> 中滚动复选框而不是整个表格。下面是我的代码和我尝试过的：

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 All 按钮而不是整个主体之后滚动。

数据

[{
  "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": []
  }]
}]

普伦克

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

Answer 1

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

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

我在这里创建的一个简单的 codepen 链接。

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;
}