HTML scaling table with resolution - css

Question

I have a html table on my web page. It fits and looks really well on 1920x1080 but when the resolution gets changed to a smaller one or the window gets resized, then the table doesn't fit in the screen any more. I searched and tried like everything and could not fix it so I have to ask here.
Table in html:
<table class="table" id="table">
<tr id="table_headers">
<th >Id</th>
<th>Category</th>
<th>Service Date</th>
<th>Contract Date</th>
<th>Locations</th>
<th>Rate</th>
<!-- <th>Hourly Rate</th>
<th>Turn Rate</th>
<th>Flight Rate</th> -->
<th>Contract Expiration</th>
<th>Past Due Penalty</th>
<th>Billing Address</th>
<th>Billing Email</th>
<th>Name</th>
<th>Phone</th>
<th>Account Number</th>
<th>Signed</th>
<th>PDF</th>
<th class="custom">View</th>
<th class="custom">Download</th>
<th class="custom">Edit</th>
<th class="custom">Delete</th>
</tr>
<?php
$q = $db->prepare("select * from pdfs");
$q->execute();
$res = $q->fetchAll();
foreach($res as $result)
{
echo '<tr id="row'.$result['id'].'">
<td>'.$result['id'].'</td>
<td class="category_tbl_td">'.$result['category'].'</td>
<td>'.$result['date_serviced'].'</td>
<td>'.$result['contract_date'].'</td>
<td>'.$result['locations'].'</td>
<td>'.$result['rate'].'</td>
<td>'.$result['contract_expiry'].'</td>
<td>'.$result['past_due_penalty'].'</td>
<td>'.$result['billing_mail_address'].'</td>
<td>'.$result['billing_email_address'].'</td>
<td>'.$result['billing_name'].'</td>
<td>'.$result['billing_phone'].'</td>
<td>'.$result['AccountNumber'].'</td>
<td>'.$result['Signed'].'</td>
<td>'.$result['pdf_location'].'</td>
<td></td>
<td></td>
<td>
<button type="button" class="btn btn-info">
<a href="edit.php" >
<span class="glyphicon glyphicon-pencil"></span>
</button></td>
<td><b>×</b></td>
</tr>';
}
Table in css:
table,tr,th,td{
color:white;
border: 1px solid #080808;
border-collapse:collapse;
text-align: center;
font-size: 16px;
margin-left: -27%;
margin-top: 1%;
text-align: center;
table-layout: auto;
min-width: 50%;
font-family: Arial;
background:linear-gradient(top, #3c3c3c 0%, #222222 100%);
background:-webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
}
I thought adding % instead of px would fix it but it doesn`t. The whole website works just fine, but the table causes issues.
Any ideas what might be the reason for that and how to fix it?
This is how table looks with full hd:
This is how it looks on any lower resolution:

Answer 1

For responsive websites give width in terms of percentage rather than pixels
.class_name
{
width:50%
}

Answer 2

To some screen size you can use this
.table { width: 100%; }
On mobile deviсes you must try someting more complicated. Adding JS Plugin
This fore excample
https://github.com/filamentgroup/tablesaw
Or use css tricks like this
https://css-tricks.com/responsive-data-tables/