<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>KEYBOARD SHORTCUT 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;">IN 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-y: scroll;
max-height: 300px;
}
#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 keyboard shortcuts
$scope.sushi = [
{ name: '` / ~', fish: 'PLAYER INFO - SERVER RULES - KEYBOARD SHORTCUT', 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: 'VEHICLE LIGHTS' },
{ name: 'K', fish: 'HELMET/GLASSES/MASK', tastiness: 'HELMET/GLASSES/MASK' },
{ name: 'BACKSPACE', fish: '-', tastiness: 'HAZARD' },
{ name: '-', fish: '-', tastiness: 'LEFT SIGNAL' },
{ name: '=', fish: '-', tastiness: 'RIGHT SIGNAL' },
{ name: 'B', fish: '-', tastiness: 'SEATBELT' }
];
});
Hello! I am looking to address a problem where if the height of the table exceeds 300px, I want the table to have a scrollbar. I attempted using overflow:scroll; but it didn't work as expected. I'm unsure about where and how to apply the overflow property along with setting the height to 300px. Despite my efforts, the table still extends beyond the body. Any suggestions on how to resolve this issue would be greatly appreciated. Thank you!