Question

如果高度超过200px，我需要添加垂直滚动。我尝试了一些解决方案，在<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;
}

RESULT

所以我希望只有在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": []
  }]
}]

PLUNKER

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

Answer 2

我希望只有在selectAll / Clear All按钮不是全身之后滚动。

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

   <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。

在表格行中添加垂直滚动

2 个答案: