Responsive page is not working in table - html

Question

Currently for this project i am using bootstrap and my personal css files. I have defined page wrapper class to differentiate between menu item and content.
The table is working fine in broad view. Working(desktop view)
But while in mobile view half of the content displayed in dark background
Mobile view(not working)
code:
Php code for the Page:
<?php
include "includes/header.php"
?>
<div id="wrapper">
<!-- Navigation Bar -->
<?php include "includes/navigation.php" ?>
<div id="page-wrapper">
<div class="container-fluid">
<?php
$query = "SELECT * FROM patent_details where sap_id='$sap'";
$result = mysqli_query( $conn, $query );?>
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header dash-head">
<center>Patent View</center> <!-- All data defined here-->
</h1>
<table class="table">
<thead>
<th>Patent ID</th>
<th>Author other than UPES</th>
<th>Department</th>
<th>File Application No</th>
<th>Filling Date</th>
<th>Country</th>
<th>Patent Status</th>
<th>Currency</th>
<th>Income Generated</th>
</thead>
<tbody>
<?php
if( mysqli_num_rows($result) > 0 ) {
while( $row = mysqli_fetch_assoc($result) ) {
$patent_id = $row['patent_id'];
$auther_other_than_UPES = $row['author_other_than_UPES'];
$department = $row['department'];
$file_application_no = $row['file_application_no'];
$filing_date = $row['filing_date'];
$country = $row['country'] ;
$patent_status = $row['patent_status'];
$currency = $row['currency'];
$income_generated = $row['faculty_income_generated_through_patents'];
echo "<tr>";
echo "<td>$patent_id</td>";
echo "<td>$auther_other_than_UPES</td>";
echo "<td>$department</td>";
echo "<td>$file_application_no</td>";
echo "<td>$filing_date</td>";
echo "<td>$country</td>";
echo "<td>$patent_status</td>";
echo "<td>$currency</td>";
echo "<td>$income_generated</td>";
echo "<td><a type='button' href='patent_edit.php?id=".$patent_id."' >Edit</a>;</td>";
echo "</tr>";
}
}
else {
echo "No data available";
}
?>
</tbody>
</table>
<?php include "includes/footer.php"
?>
CSS code for the page:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin-top: 100px;
background-color: #222;
}
#media(min-width:768px) {
body {
margin-top: 50px;
}
}
#wrapper {
padding-left: 0;
}
#page-wrapper {
width: 100%;
padding: 0;
background-color: #fff;
}
#media(min-width:768px) {
#wrapper {
padding-left: 225px;
}
#page-wrapper {
padding: 10px;
}
}
/* Top Navigation */
.top-nav {
padding: 0 15px;
}
.top-nav>li {
display: inline-block;
float: left;
}
.top-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #999;
}
.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
color: #fff;
background-color: #000;
}
.top-nav>.open>.dropdown-menu {
float: left;
position: absolute;
margin-top: 0;
border: 1px solid rgba(0,0,0,.15);
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.top-nav>.open>.dropdown-menu>li>a {
white-space: normal;
}
/* Side Navigation */
#media(min-width:768px) {
.side-nav {
position: fixed;
top: 51px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: #222;
}
.side-nav>li>a {
width: 225px;
}
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #000 !important;
}
}
.side-nav>li>ul {
padding: 0;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
color: #999;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.navbar-inverse .navbar-brand {
color: #ff4500;
font-size: 25px;
}
.dash-head{
font-size: 40px;
color: #ff4703;
}
p{
font-size: 15px;
padding: 0;
}
.dash-list{
list-style: none;
}
footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding:0;
color: #fff;
background-color: #555;
text-align: center;
}

Answer 1

As you mentioned you are using bootstrap, in order to make your table responsive you should just make use of the classes available within the framework. I.e:
<table class='table table-responsive'>
//Rest of table here
</table>
You can find the complete documentation here: http://getbootstrap.com/css/#tables

Answer 2

Although you used bootstrap you haven't done anything to make the table responsive.
<div class="table-responsive">
<table class="table">
//Code
</table>
</div>
Use above mentioned code. I hope you will get what you wanted.