javascript - 在表格行中添加垂直滚动

Question

我需要的是添加垂直滚动，例如，如果高度超过 200 像素。我尝试了一些解决方案来结束 <tr>在<div>标记并添加 overflow-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 按钮之后而不是整个 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": []
  }]
}]

插入器

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

Answer 1

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

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

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

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