为所有移动设备调整 DIV table

Question

我无法获得 table 我必须在移动设备上正确调整大小。（iPhone、Pixel等）是因为我的DIVtable手机太宽了。它在 iPad、笔记本电脑等设备上看起来还不错，但对于手机来说太宽了。我已经为我的导航栏使用了媒体查询，但这有点复杂，因为它是我从 PHP.

显示的 table

<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';

Answer 1

这是一种可能的解决方案。在 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

为所有移动设备调整 DIV table

Resizing DIV table for all mobile devices

html

css

php

media-queries

responsive

演示