Изменение размера таблицы DIV для всех мобильных устройств - PullRequest
Новая
       10

Изменение размера таблицы DIV для всех мобильных устройств

1 голос
/ 02 апреля 2019

У меня проблемы с получением таблицы. Мне нужно правильно изменить размер на мобильных устройствах.(iPhone, Pixel и т. д.) Это связано с тем, что моя таблица DIV слишком широка для мобильных устройств.Он выглядит просто отлично на iPad, ноутбуке и т. Д., Но для телефонов он слишком широк.Я использовал медиа-запросы для моей панели навигации, но это немного сложнее, так как это таблица, которую я показываю из PHP. 

<html>
    <head>
        <style>


        .table{ 
                display: table;
                margin-left: auto;
                margin-right: auto;
                text-align: left;

            }

@media only screen and (max-width: 600px) {

}

            .tr{ 
                display: table-row; 
                padding: 1px;
            }
            .td{ 
                display: table-cell;
                padding: 5px;
            }
            .padding {
                padding: 12px;
                margin: auto;
            }


        </style>
    </head>
<body> 

<div>
    <div class ="top">
            <center><h1 class="profile">Ticket #<?php echo $id ?></h1></center>
    </div>

    <hr>

        <?php     
            $sql = "select a.id, a.lname, a.fname, a.phonenum, a.room, a.building, a.issue, a.start_time, a.end_time, a.description, a.username
            from appointments as a
            where a.email = '". $_SESSION['email'] ."' and id = '$id'
            ";


            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                echo " <div class='table'>
                <div class='tr'>
                <div class='td'><b>Ticket #</b></div>
                <div class='td'><b>Username</b></div>
                <div class='td'><b>Name</b></div>
                <div class='td'><b>Residence</b></div>
                <div class='td'><b>Issue</b></div>
                <div class='td'><b>Date</b></div>
                <div class='td'><b>Appointment Time</b></div>
                </div>";
                // output data of each row
                while($row = $result->fetch_assoc()) {
                    $starttime = strtotime($row["start_time"]); //converts date time received from MySQL into a string
                    $endtime = strtotime($row["end_time"]);
                    $date = date("m/d/y", $starttime);
                    $start = date("g:i A", $starttime);
                    $end = date("g:i A", $endtime);
                    $building = str_replace('_',' ', $row["building"]);
                    echo "<div class='tr'>
                    <div class='td'>".$row["id"]."</div>
                    <div class='td'>".$row["username"]."</div>
                    <div class='td'>".$row["fname"].' '.$row["lname"]."</div>
                    <div class='td'>".$building." ".$row["room"]."</div>
                    <div class='td'>".$row["issue"]."</div>
                    <div class='td'>".$date."</div>
                    <div class='td'>".$start.'-'.$end."</div>
                    </div>";
                    $description = $row["description"];
                }
                echo "</div>";
                echo "<br><hr><p>
                <center><h2>Issue Description</h2></center>
                <center>$description</center <br><br>
                ";
            } else {
                echo "<br/>Error</b>";
            }

        ?>
</div>



<?php

require 'includes/footer.php';

1 Ответ

0 голосов
/ 02 апреля 2019

Вот одно из возможных решений. В разделе 600px (я звоню на этот мобильный телефон в этом примере) измените отображение table на flex (направление строки), а каждый дочерний дисплей tr также на flex (направление столбца).

Основной бит, который я добавил, таков: 

@media screen and (max-width: 600px) {
  body .table {
    display: flex;  
    flex-wrap: nowrap;
    justify-content: center;
  }

  .table .tr {
    display: flex;
    flex-direction: column;
  }

  .table .td {
    white-space: nowrap;
  }
}

Демо 

h2 {
  margin: 20px 45px;
}

h1 {
  text-align: center;
}

p {
  margin: 20px 45px;
}

.responsive {
  width: 100%;
  height: auto;
}

body {
  margin: 0;
}

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(119, 13, 41);
}

ul.nav li {
  float: left;
}

ul.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Open Sans', Arial;
  font-style: normal;
  font-weight: 300;
}

ul.nav li a:hover:not(.active) {
  background-color: rgb(237, 235, 235);
  color: rgb(119, 13, 41);
}

ul.nav li a.active {
  background-color: rgb(169, 5, 51);
}

ul.nav li.right {
  float: right;
}

@media screen and (max-width: 600px) {
  ul.nav li.right,
  ul.nav li {
    float: none;
  }
}

table,
th,
td {
  border: 0px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

td {
  padding: 7px;
  font-family: 'Open Sans', Arial;
  font-weight: 300;
  font-size: 18px;
}

th {
  padding: 7px;
  font-family: Georgia;
  font-weight: 400;
  font-size: 22px;
}

</style></head><style>.table {
  display: table;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

@media only screen and (max-width: 600px) {
  .td {
    width: 50%;
  }
}

.tr {
  display: table-row;
  padding: 1px;
}

.td {
  display: table-cell;
  padding: 5px;
}

.padding {
  padding: 12px;
  margin: auto;
}

@media screen and (max-width: 600px) {
  body .table {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .table .tr {
    display: flex;
    flex-direction: column;
  }
  .table .td {
    white-space: nowrap;
  }
}
<div>
  <div class="top">
    <center>
      <h1 class="profile">Ticket #123461</h1>
    </center>
  </div>

  <hr>

  <div class="table">
    <div class="tr">
      <div class="td"><b>Ticket #</b></div>
      <div class="td"><b>Username</b></div>
      <div class="td"><b>Name</b></div>
      <div class="td"><b>Residence</b></div>
      <div class="td"><b>Issue</b></div>
      <div class="td"><b>Date</b></div>
      <div class="td"><b>Appointment Time</b></div>
    </div>
    <div class="tr">
      <div class="td">123461</div>
      <div class="td">username</div>
      <div class="td">John Doe</div>
      <div class="td">dorm 5</div>
      <div class="td">WiFi not working</div>
      <div class="td">06/01/19</div>
      <div class="td">12:00 PM-12:50 PM</div>
    </div>
  </div><br>
  <hr>
  <p>
  </p>
  <center>
    <h2>Issue Description</h2>
  </center>
  <center>In fermentum facilisis lorem in pharetra. Fusce massa arcu, tincidunt at arcu sed, pellentesque volutpat augue. Curabitur viverra mauris id magna ultricies tristique vitae nec sapien. Nam aliquet pulvinar tincidunt. Phasellus molestie in tellus vitae
    pharetra. Nunc facilisis mi tincidunt turpis elementum sodales. Vivamus sed molestie tellus, condimentum feugiat metus.</center><br>
</div>



<!-- Footer div -->
<div class="footer">
  <style>
    div.footer {
      margin: auto;
      text-align: center;
    }

CodePen

...