Адаптивный экран PHP таблиц в HTML - PullRequest
Новая
       1

Адаптивный экран PHP таблиц в HTML

0 голосов
/ 03 февраля 2020

Итак, у меня есть страница 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();
}
?>

Ответы [ 3 ]

0 голосов
/ 05 февраля 2020

Для любопытных я использовал W3. CSS и его контейнерные объекты. Все работает, как я задумал, кроме одной таблицы, которая, скорее всего, я испортил.

Оцените помощь!

0 голосов
/ 15 февраля 2020

Вы можете использовать CSS Медиа-запросы , с помощью которых вы можете иметь отдельные стили для разных размеров экрана, или любой HTML5 Boilerplate, такой как Bootstrap, с помощью которого вы надеваете не нужно явно писать медиа-запросы. В случае bootstrap добавьте ссылку на библиотеку CSS в ваш тег HTML head, и вы готовы к go.

Предложение

  • * Используемая вами метка 1022 * устарела, попробуйте вместо нее использовать CSS ( Refer me ).
  • Сначала добавьте <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1,0"> в свой головной раздел.
  • Следующий фрагмент кода, который вы добавили в голову, приводит к тому, что ваша страница refre sh. <META HTTP-EQUIV="refresh" CONTENT="86400"> (см. Меня) .
  • Всегда старайтесь использовать CSS классы вместо указания стилей непосредственно к html элементам.
  • Вы также можете опустить некоторые столбцы в мобильном представлении (если не обязательно), или вы можете включить горизонтальную прокрутку для вашей HTML таблицы (см. меня) .
0 голосов
/ 04 февраля 2020

Я не понимаю, какой тег meta вы установили на html, но попробуйте это сделать, чтобы экран реагировал 

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1,0">

, после чего вы можете настроить экран реагировать условие с использованием css

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...