Question

嘿，我有一个嵌套在一个表中的表，而这个表又嵌套在一个div中。我还有另一个应该坐在下面的div。然而，这个div似乎坐在桌子的中间。我希望能够在div或卡上设置A max height并让表格内部可滚动。这是我的代码和一个plunkr的链接，以显示我正在经历的事情。

HTML：

<div layout="column" style="dislpay: flex;max-height:100px !important">
<md-card flex class="white-card" style="max-height:100px !important">
    <h3 class="no-margin">Table</h3>
    <table style="width:100%;max-height:38%" >
<thead >
<tr id="stack-list-header">
    <th >
        <span>Name</span>
        <i class="fa right" ></i>
    </th>
    <th >
        <span>Age</span>
        <i class="fa right" ></i>
    </th>

</tr>
</thead>
<tbody >
    <tr ng-repeat="person in persons track by $index"
    >
    <td  style="width: 50%">{{person.name}}</td>
    <td   style="width: 50%">{{person.age}}</td>

</tr>
</tbody>
 </table>
</md-card>



</div>

<div layout="column" style="dislpay: flex;max-height:100px !important">
<md-card flex class="white-card" style="max-height:100px !important">
        <h3 class="no-margin">New Div</h3>
     <p>This should it below the table</p>
</md-card>

JS：

function Ctrl($scope) {

$scope.persons = [

  {
name : "Bob",
age : "dole"
  },{
name : "Bob",
age : "dole"
  },{
name : "Bob",
age : "dole"
  },{
name : "Bob",
age : "dole"
  },{
name : "Bob",
age : "dole"
  },{
name : "Bob",
age : "dole"
  },{
name : "Bob",
age : "dole"
  },
  ];
}

Plunkr：http://plnkr.co/edit/dbaoz1SjtPQdoCFyZ3xi?p=preview

非常感谢任何和所有帮助。

Answer 1

您必须在列div上使用overflow-y css属性，如下所示：

<div layout="column" style="display: flex;max-height:100px !important;overflow-y:scroll">

最大尺寸的最大高度护理，如果列表较高，则会显示一个scoll bar。（顺便提一下拼写＆＃34; dipslay＆＃34 ;;））

使用嵌套表

1 个答案: