Question

我的网页上有一个html表。它适合并在1920x1080上看起来确实不错，但是当分辨率更改为较小的分辨率或调整窗口大小时，该表将不再适合屏幕。我搜索并尝试了所有内容，但无法解决，因此我不得不在这里询问。

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><a href="ViewerJS/#../'.$result['pdf_location'].'" class="glyphicon glyphicon-eye-open"></a></td>
                <td><a href="download.php?file=' . $result['pdf_location'] . '" class="glyphicon glyphicon-download-alt"></a></td>
                <td>
                <button type="button" class="btn btn-info">
                <a href="edit.php" >
                  <span class="glyphicon glyphicon-pencil"></span>
                </button></td>
                    <td><a href="#" onclick="remove('.$result['id'].')" class="btn btn-danger"><b>&times;</b></a></td>

                </tr>';
               }

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%);
}

我认为添加%而不是px可以解决此问题，但不能解决。整个网站都可以正常工作，但是该表格会引起问题。

任何想法可能是什么原因以及如何解决？

这是具有全高清的桌子的外观：