我的网页上有一个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>×</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
可以解决此问题,但不能解决。整个网站都可以正常工作,但是该表格会引起问题。
任何想法可能是什么原因以及如何解决?
这是具有全高清的桌子的外观:
这是在任何较低分辨率下的外观:
答案 0 :(得分:1)
对于自适应网站,请以百分比而不是像素为单位给出宽度
.class_name { 宽度:50% }
答案 1 :(得分:0)
对于某些屏幕尺寸,您可以使用此
.table { width: 100%; }
在移动设备上,您必须尝试更复杂的操作。添加JS插件
此前例 https://github.com/filamentgroup/tablesaw
或使用像这样的css技巧