个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 19:28:55 24 4
gpt4 key购买 nike

我无法获取必须在移动设备上正确调整大小的表格。 (iPhone, Pixel, etc.) 这是因为我的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';


最佳答案

这是一种可能的解决方案。在 600px(本例中我称其为 mobile)下，将 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

关于php - 为所有移动设备调整 DIV 表的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55468734/

24 4 0
文章推荐： Python/Flask mysql 游标 : Why it doesn't work?
文章推荐： ios - 如何在每个 Controller View 上重用滑动菜单的条形按钮
文章推荐： javascript - 触发事件
文章推荐： python - 我可以在 Python 中构建 TensorFlow 可服务对象吗
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com