[英]Screen Responsive PHP tables in HTML
所以我有一個 html 頁面，它使用 PHP 調用來填充各種表格。 該頁面在我的一個屏幕上看起來很棒，但在其他地方都很糟糕。 希望它是一個簡單的修復，但任何反饋將不勝感激。 我知道我不應該使用 px 但百分比對我來說不正常。
CSS
td.COMPLETE {
background-color: green;
color: black;
text-align: center;
}
td{
color: white;
text-align: center;
}
td.Blue {
background-color: blue;
color: white;
text-align: center;
}
td.Yellow {
background-color: yellow;
color: black;
text-align: center;
}
td.Orange {
background-color: orange;
color: black;
text-align: center;
}
td.Red {
background-color: red;
color: black;
text-align: center;
}
#dTitle { position: fixed; visibility: visible; left: 1295px; top: 135px;}
#dTable { position: fixed; visibility: visible; left: 1050px; top: 175px;}
#cTitle { position: fixed; visibility: visible; left: 865px; top: 135px;}
#cTable { position: fixed; visibility: visible; left: 855px; top: 175px; width:20%}
#rTitle { position: fixed; visibility: visible; left: 350px; top: 135px;}
#rTable { position: fixed; visibility: visible; left: 50px; top: 175px; width:45%}
#sTitle { position: fixed; visibility: visible; left: 450px; top: 550px; }
#sTable { position: fixed; visibility: visible; left: 50px; top: 590px; width:60%}
HTML
<title>Reports</title>
<link href="status.css" rel="stylesheet">
<body bgcolor = #000000>
<font color = "white">
<head>
<META HTTP-EQUIV="refresh" CONTENT="86400">
<center><h1 id="logo"><img src="reports.png" alt="reports logo" height="75" width="75" /><u>Reports</u> </h1></center>
<style>
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<?php
try
{
$db = new PDO("sqlite:root/.db");
$count = $db->query('SELECT COUNT(*) from reported');
foreach($count as $row)
{
print "<center>Total Database Entires: ".$row['COUNT(*)']. "</center>";
}
print "<div id=dupiTitle><h4>Progress</h4></div>";
print "<div id=dupiTable><table border=10 bordercolorlight=#383838 bordercolordark=Gray>";
print "<tr><td><u>Operator</u></td><td><u>Total Reports</u></td><td><u>Unique Users</u></td><td><u>Percent of reports Entered</u></td></tr>";
$result = $db->query('SELECT operator, COUNT(DISTINCT userID), COUNT(userID) FROM reported GROUP BY operator ORDER BY COUNT(DISTINCT userID) DESC');
foreach($result as $row)
{
print "<tr><td>".$row['operator']."</td>";
print "<td>".$row['COUNT(userID)']."</td>";
print "<td>".$row['COUNT(DISTINCT userID)']."</td>";
$sql = "SELECT dupi, COUNT(DISTINCT userID) FROM reported WHERE operator = '" .$row['operator'] ."' AND report is NULL";
$results = $db->query($sql);
$complete = "COMPLETE";
foreach($results as $rows)
{
if ($rows['COUNT(DISTINCT userID)'] == 0){
print "<td class=".$complete.">COMPLETE</td></tr>";
}elseif(100 - round(($rows['COUNT(DISTINCT userID)']/$row['COUNT(DISTINCT userID)']) * 100) == 100){
print "<td>99%</td></tr>";
}else{
$per = 100 - round(($rows['COUNT(DISTINCT userID)']/$row['COUNT(DISTINCT userID)']) * 100);
print "<td>" .$per. "%</td></tr>";
}
}
}
print "</table></div>";
echo "<div id=cTitle><h4>Color Break Down</h4></div>";
print "<div id=cTable><table border=10 bordercolorlight=#383838 bordercolordark=Gray>";
print "<tr><td><u>Color Code</u></td><td><u>Count</u></td></tr>";
$result = $db->query("SELECT color_code,COUNT(*) FROM reported GROUP BY color_code ORDER BY COUNT(*) DESC");
foreach($result as $row)
{
print "<tr><td class=".$row['color_code'].">".$row['color_code']."</td>";
print "<td>".$row['COUNT(*)']."</td></tr>";
}
print "</table></div>";
echo "<div id=rTitle><h4>Top Reported</h4></div>";
print "<div id=r><table border=10 bordercolorlight=#383838 bordercolordark=Gray>";
print "<tr><td><u>Operator</u></td><td><u>Username/UserID</u></td><td><u>Report</u></td><td><u>Times Reported</u></td></tr>";
$result2 = $db->query('SELECT operator, userID, report, COUNT(*) FROM reported WHERE report is NOT NULL AND report is NOT "TEST" AND report is NOT "Not Found" AND report is NOT "Restricted" AND report is NOT "Not Verified" GROUP BY report ORDER BY COUNT(*) DESC LIMIT 10');
foreach($result2 as $row)
{
print "<tr><td>".$row['operator']."</td>";
print "<td>".$row['userID']."</td>";
print "<td>".$row['report']."</td>";
print "<td>".$row['COUNT(*)']."</td></tr>";
}
print "</table></div>";
echo "<div id=rTitle><h4>Top Reasons Reported</h4></div>";
print "<div id=rTable><table border=10 bordercolorlight=#383838 bordercolordark=Gray>";
print "<tr><td><u>Reason</u></td><td><u>Times Reported</u></td></tr>";
$result2 = $db->query('SELECT explanation, COUNT(*) FROM reported GROUP BY explanation ORDER BY COUNT(*) DESC LIMIT 10');
foreach($result2 as $row)
{
print "<tr><td>".$row['explanation']."</td>";
print "<td>".$row['COUNT(*)']."</td></tr>";
}
print "</table></div>";
$db = NULL;
}
catch(PDOException $e) {
echo $e->getMessage();
}
?>
我不明白你在 html 上設置的元標記是什么，但試試這個讓屏幕響應
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1,0">
之后您可以使用 css 設置屏幕響應條件
對於那些好奇的人，我最終使用了 W3.CSS 及其容器對象。 除了一張桌子外，其他一切都按我的意圖工作，這很可能是我搞砸的。
感謝幫助！
您可以使用CSS Media Queries，通過它您可以為不同的屏幕尺寸提供單獨的樣式，也可以使用任何 HTML5 Boilerplate，例如Bootstrap ，您無需顯式編寫媒體查詢。 在引導程序的情況下，在您的 HTML head 標簽中添加庫 CSS 鏈接，您就可以開始了。
建議
我想制作一個響應式橫幅，它會根據分辨率屏幕的 php、js 和 html
[英]I want to make a responsive banner, that changes depending of the resolution screen with php, js and html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.