Каков наилучший способ сделать сгенерированную PHP таблицу адаптивной? - PullRequest
Новая
       21

Каков наилучший способ сделать сгенерированную PHP таблицу адаптивной?

0 голосов
/ 06 ноября 2019

У меня есть PHP-сайт, который связан с SQL-базой данных. База данных отображается на странице в виде таблицы (см. Код ниже). 

<?php
require "connect.php";

$query = "SELECT * FROM table";

$res = mysqli_query($db, $query);

echo '<table border=1>';
while ($line = mysqli_fetch_assoc($res)) {
  echo "<tr>";
  echo "<td>". $line['date'] . "</td>";
  echo "<td>". $line['team1'] . "</td>";
  echo "<td>". $line['team2'] . "</td>";
  echo "<td>". $line['result'] . "</td>";
  echo "</tr>";
}
echo "</table>";
?>

Таблица выглядит хорошо, если вы открываете веб-сайт на компьютере, но если вы открываете его на своем телефоне, таблица слишком большая (имеет много столбцов), чтобы отображаться полностью без прокрутки. Поэтому я подумал о новой структуризации, если вы откроете страницу на мобильном телефоне, но я не хочу иметь 2 разных документа, только один. Я пока не уверен, как будет выглядеть мобильное структурирование, но сейчас это не имеет значения. У меня вопрос: что было бы лучшим способом узнать, является ли устройство компьютером или телефоном. Одним из способов было бы узнать ширину устройства с помощью JavaScript и, в зависимости от распознанной ширины, выполнить правильный PHP-код. Это выглядело бы так: 

var width = screen.width;
if (width > 1000) {
   document.write("<?php either this ?>");
}
else {
   document.write("<?php or this ?>");
}

Другим способом было бы вывести ширину экрана в скрытую форму ввода. Тогда PHP может сохранить это значение в переменной и, в зависимости от значения, выполнить правильный PHP-код. Таким образом, отличие от способа № 2 заключается в том, что я использую команду PHP-if-, а не команду JavaScript-if-.

1 Ответ

0 голосов
/ 09 ноября 2019

Один из возможных способов: использовать div теги с классами вместо table, tr и td, затем применить к ним свойства таблицы с помощью CSS, а затем создать один или несколько медиазапросов, которые заменят таблицу-подобно CSS с обычными блочными элементами, таким образом ячейки таблицы располагаются в строках друг над другом:

(примечание: используйте «раскрыть фрагмент», а затем перетащите окно ниже ширины 600 пикселей, чтобы увидеть результат во фрагменте. Фрагмент не содержит никакого PHP, а представляет собой пример разобранного HTML-кода) 

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 4px 8px;
  border: 1px solid #ccc;
}

@media screen and (max-width: 600px) {
  .table, .row, .cell {
    display: block;
  }
  .cell:not(:last-child) {
  border-bottom: none;
}
<div class="table">
  <div class="row">
    <div class="cell"> date1 </div>
    <div class="cell"> team1 </div>
    <div class="cell"> team2 </div>
    <div class="cell"> result1 </div>
  </div>
   <div class="row">
    <div class="cell"> date2 </div>
    <div class="cell"> team3 </div>
    <div class="cell"> team4 </div>
    <div class="cell"> result2 </div>
  </div>
   <div class="row">
    <div class="cell"> date3 </div>
    <div class="cell"> team5 </div>
    <div class="cell"> team6 </div>
    <div class="cell"> result3 </div>
  </div>
</div>
...