css - 带分辨率的 HTML 缩放表

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 会修复它，但事实并非如此。整个网站工作正常，但表格会出现问题。

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

这是全高清表格的样子:

这是它在任何较低分辨率下的样子:

Answer 1

对于响应式网站，以百分比而非像素的形式给出宽度

.类名{宽度:50%