Невозможно установить размер таблицы и прокрутку

Question

<div id="answer3" class="tab-pane">  
            <div class="col-md-12" style="background-color:rgba(68, 70, 79,0.4);padding-left:50px;padding-top:5px;border-radius:5px;height:100%;">
                <h3>HOTKEY INFO</h3></br>
                <div class="container" ng-app="sortApp" ng-controller="mainController">
                    <form>
                        <div class="form-group">
                            <div class="input-group">
                                <div style="color:white;background-color:#f78800;border-color:#f78800;" class="input-group-addon"><i class="fa fa-search"></i></div>
                                    <input style="width:97%;"type="text" class="form-control" placeholder="Search..." ng-model="searchFish">
                            </div>      
                        </div>
                    </form>

                <table class="table table-bordered" id="hotkey">
                    <thead>
                        <tr>
                            <td>
                                <a style="color:#f78800;font-weight:bold;font-size:15px;">KEY</a>
                            </td>
                            <td>
                                <a style="color:#f78800;font-weight:bold;font-size:15px;">ON FOOT</a>
                            </td>
                            <td>
                                <a style="color:#f78800;font-weight:bold;font-size:15px;">ON VEHICLE</a>
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
                            <td>{{ roll.name }}</td>
                            <td>{{ roll.fish }}</td>
                            <td>{{ roll.tastiness }}</td>
                        </tr>
                    </tbody>

                </table>
                </div>
            </div>
          </div>

#hotkey {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 97%;
  overflow:scroll;
}

#hotkey td, #hotkey th {
  border: 2px solid #f78800;
  padding: 8px;
}

#hotkey td {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  color: #fff;
  background-color:transparent;
}

angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term

  // create the list of sushi rolls 
  $scope.sushi = [
    { name: '` / ~', fish: 'PLAYER INFO - SERVER RULES - HOTKEY', tastiness: '-' },
    { name: 'F1', fish: 'PLAYER INTERACTION', tastiness: 'VEHICLE INTERACTION' },
    { name: 'F2', fish: 'INVENTORY', tastiness: '-' },
    { name: 'F3', fish: '-', tastiness: 'INVENTORY' },
    { name: 'F4', fish: '', tastiness: '' },
    { name: 'F4', fish: 'EMOTES', tastiness: '-' },
    { name: 'F6', fish: 'JOB INTERACTION', tastiness: '-' },
    { name: 'F7', fish: 'SCOREBOARD', tastiness: 'SCOREBOARD' },
    { name: 'F8', fish: 'CONSOLE LOG', tastiness: 'CONSOLE LOG' },
    { name: 'F12', fish: 'SCREENSHOT', tastiness: 'SCREENSHOT' },
    { name: 'E', fish: '-', tastiness: 'HORN' },
    { name: 'T', fish: 'CHAT', tastiness: 'CHAT' },
    { name: 'Y', fish: '-', tastiness: 'CRUISE CONTROL' },
    { name: 'U', fish: '-', tastiness: 'SPEED LOCK' },
    { name: 'H', fish: '-', tastiness: 'LAMPU KENDARAAN' },
    { name: 'K', fish: 'HELM/KACAMATA/TOPENG', tastiness: 'HELM/KACAMATA/TOPENG' },
    { name: 'BACKSPACE', fish: '-', tastiness: 'HAZARD' },
    { name: '-', fish: '-', tastiness: 'LEFT SIGN' },
    { name: '=', fish: '-', tastiness: 'RIGHT SIGN' },
    { name: 'B', fish: '-', tastiness: 'SEATBELT' }
  ];

});

Привет, я хочу изменить это, поэтому, если высота таблицы больше 300 пикселей, например, чем активна прокрутка таблицы, я просто пытаюсь использовать overflow: scroll; но, похоже, не работает, я не знаю, где применить переполнение, я просто пытаюсь разместить его повсюду и добавить высоту: 300 пикселей; , но он вообще не работает, стол все еще выше тела, есть идеи по моей проблеме? спасибо

Answer 1

РЕШЕНО Добавление высоты и переполнения в стиле div контейнера

<div class="container" ng-app="sortApp" ng-controller="mainController" style='height:580px;overflow-y:scroll;'>