Solved: Can't Scroll Records | Experts Exchange

I have a page with the Client's records. However, I am unable to scroll to see all of the records. For some reason it cuts off. Is it the CSS ?

$sql = <<<EOT
SELECT DATE_FORMAT(tbl_session.session_date,"%W, %M, %d, %Y") AS DATE,
TIME_FORMAT(CONCAT(tbl_session.time_slot_id, ":00:00"), "%h:%i %p") AS TIME,
tbl_session.session_type AS TYPE, tbl_therapist.therapist_name as THERAPIST, tbl_session.session_status AS STATUS
FROM tbl_session
INNER JOIN tbl_therapist
ON tbl_therapist.therapist_id=tbl_session.therapist_id
WHERE tbl_session.client_id=$client_id
ORDER BY session_date ASC;
EOT;
$result = $db->query($sql);
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Client | Session History</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="vendor/themify-icons/themify-icons.min.css">
  <link href="vendor/animate.css/animate.min.css" rel="stylesheet" media="screen">
  <link href="vendor/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" media="screen">
  <link href="vendor/switchery/switchery.min.css" rel="stylesheet" media="screen">
  <link href="vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" media="screen">
  <link href="vendor/select2/select2.min.css" rel="stylesheet" media="screen">
  <link href="vendor/bootstrap-datepicker/bootstrap-datepicker3.standalone.min.css" rel="stylesheet" media="screen">
  <link href="vendor/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" media="screen">
  <link rel="stylesheet" href="assets/css/styles.css">
  <link rel="stylesheet" href="assets/css/plugins.css">
  <link rel="stylesheet" href="assets/css/themes/theme-6.css" id="skin_color" />

<style>
/*.form-div { margin-top: 100px; border: 1px solid #e0e0e0; }
#profileDisplay { display: block; height: 210px; width: 35%; margin: 0px auto; border-radius: 50%; }
.img-placeholder {
width: 35%;
color: white;
height: 100%;
background: black;
opacity: .7;
height: 210px;
border-radius: 50%;
z-index: 2;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: none;
}
.img-placeholder h4 {
margin-top: 49%;
color: white;
}
.img-div:hover .img-placeholder {
display: block;
cursor: pointer;
}
.therapist{
font-size:24px;
color:#000;
text-align:center;
margin: 0 auto;
}*/
.panel-white, .partition-white {
background-color: #ffffff;
position: relative;
color: #5b5b60;
border: 1px solid rgba(0, 0, 0, 0.07);
height:400px;
width:650px;
margin-top:-20px;
}
#report{
color:#000;
}
.sub{padding-top:24px;}

tr:nth-child(even) {
background-color: #f2f2f2;
}
.topics tr { line-height: 28px; }
  </style>
   </head>
<body>
<div id="app">
<?php include('includes/sidebar.php');?>
<div class="app-content">
<?php include('includes/header.php');?>


<div class="main-content">
<div class="wrap-content container" id="container">


<section id="page-title">
<div class="row">
<div class="col-sm-8">
<h1 class="mainTitle"><span>Client |</span><span style="color:#C90"> Session History</span></h1>
</div>
</div>
</section>



<div class="container-fluid container-fullw bg-white">
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="panel panel-white">
<div class="panel-body">

<h4><?php echo $client->name?>'s Session History</h4>



<p><b>Last Update: </b><?php echo $client->updation_date;?></p>


<div id="report">
  <form>
<table class="topics" style="width:100%">
<colgroup>
   
  
  <col style="width: 35%;">
  <col style="width: 15%;">
  <col style="width: 15%;">
  <col style="width: 20%;">
  <col style="width: 15%;">
</colgroup>
<thead>
<tr>


<th>DATE</th>
<th>TIME</th>
<th>TYPE</th>
<th>THERAPIST</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<?php while ($row = $result->fetch(PDO::FETCH_OBJ)): ?>
<tr>


<td><?= $row->DATE; ?></td>
<td><?= $row->TIME; ?></td>
<td><?= $row->TYPE; ?></td>
<td><?= $row->THERAPIST; ?></td>
<td><?= $row->STATUS; ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</form>

</div>

</div>
</div>
</div>
</div>
</div>
<script src="../supportboard/js/min/jquery.min.js"></script> 
<script src="../supportboard/js/init.js"></script>
  
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="vendor/modernizr/modernizr.js"></script>
  <script src="vendor/jquery-cookie/jquery.cookie.js"></script>
  <script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
  <script src="vendor/switchery/switchery.min.js"></script>
  
  
  <script src="vendor/maskedinput/jquery.maskedinput.min.js"></script>
  <script src="vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
  <script src="vendor/autosize/autosize.min.js"></script>
  <script src="vendor/selectFx/classie.js"></script>
  <script src="vendor/selectFx/selectFx.js"></script>
  <script src="vendor/select2/select2.min.js"></script>
  <script src="vendor/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
  <script src="vendor/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
  
  
  <script src="assets/js/main.js"></script>
  
  <script src="assets/js/form-elements.js"></script>
  <script>
jQuery(document).ready(function() {
  Main.init();
  FormElements.init();
});
  </script>
  
  

</body>
</html>

Can't Scroll Records

Step 1. Choose a styling framework = select Bootstrap v4

Step 2. Select packages = DataTables