Question

我无法获得一张桌子，必须在移动设备上正确调整尺寸。（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';

Answer 1

这是一种可能的解决方案。在600px（在此示例中，我称为该移动设备）下，将table的显示更改为flex（行方向），并将每个tr的子显示更改为{{1} }（列方向）。

我添加的主要内容是：

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

CodePen

调整所有移动设备的DIV表大小

1 个答案:

演示