html - 带动态表 bootstrap4 的固定卡

Question

我试图让我的表格固定在卡片大小内，初始记录数是 5，但是，我希望它超过 10 或 20，卡片将是浏览器窗口的大小，并在里面创建一个滚动桌子。我怎样才能做到这一点？

我的html代码

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <div class="card-body">
        <div class="row">
            <div class="form-group row col-md-12">
                <div class="form-group col-md-4">
                    <input type="text" ng-model="vm.filtro" ng-keyup="vm.filtrar($event)" placeholder="Buscar" class="form-control mt-2 form-control-sm">
                </div>
                <div class="form-group col-md-8">
                    <div class="float-right">
                        <button type="button" data-toggle="modal" data-target="#modalCadastroProduto" class="btn btn-blue-grey btn-sm">Adicionar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group row col-md-12">
                <div class="form-group col-md-1">
                    <button type="button" ng-click="vm.proximaPagina()" class="btn btn-blue-grey btn-sm"> ></button>
                </div>
                <div class="mt-2 form-group col-md-1">
                    <select ng-change="vm.carregarProdutos(true)" ng-model="vm.quantidaDeRegistrosPorPagina" class="form-control-sm">
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
                <div class="form-group col-md-1">
                    <button type="button" ng-click="vm.paginaAnterior()" class="btn btn-blue-grey btn-sm"> <</button>
                </div>
            </div>
        </div>
        <table class="table table-hover table-sm table-bordered" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th class="th-sm">Id</th>
                <th class="th-sm">Descrição</th>
                <th class="th-sm">Observação</th>
                <th class="th-sm">Opções</th>
            </tr>
            </thead>
            <tbody ng-repeat="pro in vm.produtos">
            <tr>
                <td>{{pro.idProduto}}</td>
                <td>{{pro.descricao}}</td>
                <td>{{pro.observacao}}</td>
                <td>
                    <button class="btn btn-blue-grey dropdown-toggle"  type="button" data-toggle="dropdown" ></button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item">Alterar</a>
                        <a class="dropdown-item">Excluir</a>
                    </div>
                </td>
            </tr>
            </tbody>
            <tfoot>
            </tfoot>
        </table>
    </div>

标签： htmlcssscrollhtml-tablebootstrap-4