Stubborn table scroll

This is the first time that i’m using Bootstrap and i don’t know if bootstrap prevents me for adding a scroll to a table or the javaScript or what. I want to add the scroll to the tbody, or the table. The best i can do is to add the scroll to the id=studentTable at the top of the file:

[code=html]
<div class=”container”>
<div class=”row”>
<div class=”panel panel-primary filterable” id=”studentTable”>
<div class=”panel-heading”>
<h3 class=”panel-title”>Students</h3>
<div class=”pull-right”>
<button class=”btn btn-default btn-xs” data-toggle=”modal” data-target=”#studentEdit”><i class=”fa fa-plus” aria-hidden=”true”></i> New</button>
<button class=”btn btn-default btn-xs btn-filter”><span class=”glyphicon glyphicon-filter”></span> Filter</button>
</div>
</div>
<div class=”panel-body”>
<table class=”table”>
<thead>
<tr class=”filters”>
<th><input type=”text” class=”form-control” placeholder=”ID” disabled></th>
<th><input type=”text” class=”form-control” placeholder=”First Name” disabled></th>
<th><input type=”text” class=”form-control” placeholder=”Middle Name” disabled></th>
<th><input type=”text” class=”form-control” placeholder=”Last Name” disabled></th>
<th>Edit</th>
</tr>
</thead>
<tbody id=”studentList”>
@foreach($students as $student)
<tr>
<td>{{$student->student_id}}</td>
<td>{{$student->student_name}}</td>
<td>{{$student->student_middle}}</td>
<td>{{$student->student_last}}</td>
<td><button value={{$student->student_id}}><i class=”fa fa-pencil” aria-hidden=”true”></i></button></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(‘.filterable .btn-filter’).click(function(){
var $panel = $(this).parents(‘.filterable’),
$filters = $panel.find(‘.filters input’),
$tbody = $panel.find(‘.table tbody’);
if ($filters.prop(‘disabled’) == true) {
$filters.prop(‘disabled’, false);
$filters.first().focus();
} else {
$filters.val(”).prop(‘disabled’, true);
$tbody.find(‘.no-result’).remove();
$tbody.find(‘tr’).show();
}
});

$(‘.filterable .filters input’).keyup(function(e){
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == ‘9’) return;
/* Useful DOM data and selectors */
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents(‘.filterable’),
column = $panel.find(‘.filters th’).index($input.parents(‘th’)),
$table = $panel.find(‘.table’),
$rows = $table.find(‘tbody tr’);
/* Dirtiest filter function ever 😉 */
var $filteredRows = $rows.filter(function(){
var value = $(this).find(‘td’).eq(column).text().toLowerCase();
return value.indexOf(inputContent) === -1;
});
/* Clean previous no-result if exist */
$table.find(‘tbody .no-result’).remove();
/* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
$rows.show();
$filteredRows.hide();
/* Prepend no-result row if all rows are filtered */
if ($filteredRows.length === $rows.length) {
$table.find(‘tbody’).prepend($(‘<tr class=”no-result text-center”><td colspan=”‘+ $table.find(‘.filters th’).length +'”>No result found</td></tr>’));
}
});
});
</script>[/code]

Also in #HTML _↴