当记录结果爆表时如何修复引导表大小

Question

我有一个由模型的 MVC 循环填充的引导表。但是，当我的模型渲染大量记录时，它会导致表格和表格嵌套在其中的面板高度伸展太多。当返回的记录超过表的 max-height 属性时，是否有推荐的方法使表结果可滚动？可滚动的解决方案将是最佳的。

样式

.table{
    width:100%;
}
thead,tbody,tr,td,th{
    display:grid;

}
tr:after{ 
    content: ' ';
    display: block;
    visibility:hidden;
    clear:both;
}
thead th{
    height: 30px;
}
tbody {
    height: 120px;
    overflow-y:auto;
}
thead {

}

tbody td. thead th {
    width: 40.2%;
    float: left;
}

代码如下：（循环显示 34 条记录）

<div class="panel panel-primary">
    <div class="panel-heading clearfix">
        <h4 class="panel-title pull-left" style="padding-top: 7.5px;">My Team</h4>
        <div class="btn-group pull-right">
            <!--- Search bar-->
            <form class="navbar-form navbar-right" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search My Team">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
    <table class="table table-responsive table-hover" style="max-height:150px; height:100px;">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(model => model.Name)</th>
                <th>LAN ID</th>
                <th>Department</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            @foreach(var x in Model)
            {
                <tr class="info">
                    <td>
                        @Html.DisplayFor(modelItem => x.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => x.Lan_Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => x.CurrDept)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => x.Email)
                    </td>
                </tr>
            }
        </tbody>
    </table>
    <div class="panel-footer"></div>

Answer 1

制作如下表结构。应该可以解决您的问题

<div class="table-responsive">
  <table class="table table-striped table-bordered">
      //rest of code
  </table>
</div>