当下面有一张宽桌子时，div 不会在移动设备上占据整个屏幕宽度答案

【问题标题】：div not taking full width of screen on mobile, when there's a wide table underneath当下面有一张宽桌子时，div 不会在移动设备上占据整个屏幕宽度
【发布时间】：2022-11-13 16:29:02
【问题描述】：

阅读了很多其他关于“div nottaking full width”的帖子后，我仍然找不到关于为什么我的网站会发生以下情况的答案：

我有一个响应式 topnav 导航栏，可以在 Win11 机器上的 Chrome 中完美运行。然而，在 Android 手机上，topnav 仅在表格不那么“窄”时占据浏览器的整个宽度。似乎当表格变宽时，topnav 并没有效仿。

HTML + PHP：

<?php
// Include the database connection file
include_once("config.php");

$usr = $_GET['usr'];

// Fetch measurements (in descending order)
$result = mysqli_query($mysqli, "SELECT * FROM ".$usr." ORDER BY ts DESC");
?>
<!DOCTYPE html>
<html lang="nl">
<head>
    <title>MariaDB Bloeddruk</title>
    <link rel="stylesheet" href="../styles.css">
</head>
<body>

<div class="topnav" id="myTopNav">
    <?php include("../header.php") ?>
</div>

<div>
    <table>
        <thead>
            <tr>
                <th>Datum</th>
                <th>Tijd</th>
                <th>Bovendruk</th>
                <th>Onderdruk</th>
                <th>Hoge Bloeddruk</th>
                <th>Hartslag</th>
                <th>Onregelmatige Hartslag</th>
                <th>AF Modus</th>
                <th>AF gedetecteerd</th>
                <th>Manchet OK</th>
                <th><a class="button" href="add.php?usr=<?php echo $usr ?>">Nieuwe meting</a></th>
            </tr>
        </thead>
        <tbody>
            <?php
            // Print measurements
            while($res = mysqli_fetch_array($result)) {
                echo "<tr>";
                $dt = substr($res['ts'],0,10);
                $tm = substr($res['ts'],-8,8);
                echo "<td>".$dt."</td>";
                echo "<td>".$tm."</td>";
                echo "<td>".$res['sys_bp']."</td>";
                echo "<td>".$res['dia_bp']."</td>";
                echo "<td><input ".($res['high_bp'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>";
                echo "<td>".$res['hr']."</td>";
                echo "<td>".($res['irregular_rythm'] == '' ? "</td>" : "<input ".($res['irregular_rythm'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>");
                echo "<td><input ".($res['af_mode'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>";
                echo "<td>".($res['af_detected'] == '' ? "</td>" : "<input ".($res['af_detected'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>");
                echo "<td><input ".($res['cuff_ok'] == 1 ? "checked" : "")." type='checkbox' onclick='return false;'</td>";
                echo "<td><a href=\"edit.php?usr=".$usr."&ts=$res[ts]\">Bewerken</a> | <a href=\"delete.php?usr=".$usr."&ts=$res[ts]\" onClick=\"return confirm('Weet u zeker dat u deze meting wilt verwijderen?')\">Verwijderen</a></td>";
            }
            ?>
        </tbody>
    </table>
</div>
</body>
</html>

呈现的 HTML/代码 sn-p:

body {
        font-family: Verdana, Tahoma, sans-serif;
        font-size: calc(16px + 0.25vw);
}

.topnav {
  overflow: hidden;
  background-color: #a6e1fa;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
}

.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #bbb;
  color: black;
}

.topnav a.active {
  background-color: #001c55;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

a {
    color: #0a2472;
    text-decoration: none;
    padding: 6px;
}

table {
    border-collapse: collapse;
    border: 1px solid #0e6ba8;
    margin-left: auto;
    margin-right: auto;
}

table th {
    background-color: #0e6ba8;
    color: #fff;
    font-weight: bold;
        padding: 18px 12px;
        position: sticky;
        top: 0;
}

table tr:nth-child(even) {
        background-color: #caf0f8;
}

table tr {
    border-bottom: 1px dotted #0e6ba8;
}

table td {
    padding: 12px;
        text-align: center;
}

table td:first-child {
        white-space: nowrap;
}

form table {
    width: 33%;
}

form table tr:nth-child(even) {
        background-color: #fff;
}

form table tfoot {
    background-color: #0e6ba8;
}

form table td:first-child {
        white-space: normal;
}

.button {
    border: 1px solid #001c55;
        border-radius: 10px;
    background-color: #001c55;
    color: #fff;
    text-decoration: none;
    padding: 6px;
    min-width: 100px;
        white-space: nowrap;
}

.button:hover {
    background-color: #fff;
    color: #001c55;
    cursor: pointer;
}

input {
        font-size: inherit;
}

input[type=number] {
        width: calc(4 * (16px + 0.25vw));
        text-align: center;
}

input[type=checkbox] {
        width: calc(16px + 0.25vw);
        height: calc(16px + 0.25vw);
}

input[type=checkbox]:checked {
        accent-color: #0a2472;
        background-color: #000;
}

input[type=submit] {
    border: 1px solid #001c55;
    border-radius: 10px;
    background-color: #001c55;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    min-width: 100px;
}

input[type=submit]:hover {
    background-color: #fff;
    color: #001c55;
    cursor: pointer;
}

input[type=submit].cancel {
    background-color: #bbb;
    background-color: #bbb;
    border: 1px solid #bbb;
}

input[type=submit].cancel:hover {
    background-color: #fff;
    color: #bbb;
    cursor: pointer;
}

.float-right {
    float: right;
}

.error { 
    color: red;
    font-size: 12px;
}

<html lang="nl"><head>
    <title>MariaDB Bloeddruk</title>
    <link rel="stylesheet" href="../styles.css">
</head>
<body>

<div class="topnav" id="myTopNav">
    <a href="../">Home</a><a href="/bloeddruk/index.php?usr=joost" class="active">Bloeddruk - Joost</a><a href="/vijver/">Vijverwater</a><a href="/water/">Watermeter</a><a href="/lekkage/">Waterlekkage</a><a href="javascript:void(0)" class="icon" onclick="topNavStyle()"> <i class="fa fa-bars"></i></a></div>

<div>
    <table>
        <thead>
            <tr>
                <th>Datum</th>
                <th>Tijd</th>
                <th>Bovendruk</th>
                <th>Onderdruk</th>
                <th>Hoge Bloeddruk</th>
                <th>Hartslag</th>
                <th>Onregelmatige Hartslag</th>
                <th>AF Modus</th>
                <th>AF gedetecteerd</th>
                <th>Manchet OK</th>
                <th><a class="button" href="add.php?usr=joost">Nieuwe meting</a></th>
            </tr>
        </thead>
        <tbody>
            <tr><td>2022-10-29</td><td>09:23:00</td><td>140</td><td>80</td><td><input checked="" type="checkbox" onclick="return false;" <="" td=""></td><td>50</td><td></td><td><input type="checkbox" onclick="return false;" <="" td=""></td><td></td><td><input type="checkbox" onclick="return false;" <="" td=""></td><td><a href="edit.php?usr=joost&amp;ts=2022-10-29 09:23:00">Bewerken</a> | <a href="delete.php?usr=joost&amp;ts=2022-10-29 09:23:00" onclick="return confirm('Weet u zeker dat u deze meting wilt verwijderen?')">Verwijderen</a></td></tr></tbody>
    </table>
</div>

</body></html>

【问题讨论】：

请发布呈现的 HTML 而不是 PHP 代码。浏览器不关心 PHP。仅包含最少量的 HTML，以便我们重现您的问题。（你的桌子的一排可能就足够了）
@cloned, , 像这样吗？我已将其添加为代码 sn-p。
发生这种情况是因为 body 占用了视口宽度。你的桌子溢出身体的宽度，但不会增加它。
谢谢@CBroe，这对我来说已经足够了。

标签： html css responsive-design

【解决方案1】：

通过向包含表格的div 添加最大高度/宽度和自动溢出来解决它：

添加的CSS：

.tableContainer {
        max-width: 100vw;
        max-height: 100vh;
        overflow:auto;
}

当然，将包裹表格的 div 归类为“tableContainer”：

<div class="tableContainer">
    <table>
        <thead>
            <tr>
                <th>Datum</th>
...

【讨论】：