HTML表格适合屏幕高度答案

【问题标题】：HTML Table fit screen heightHTML表格适合屏幕高度
【发布时间】：2020-12-07 09:41:27
【问题描述】：

这就是我的页面现在的样子（颜色只是为了查看容器）：

这是我的 PHP 代码：

<div class="containerrr">
                    <div class="wrapperrr">
                        <center><h4>Leaderboard uke</h4></center>
                        <table>
                            <thead>
                                <tr>
                                    <th>Nr.</th>
                                    <th></th>
                                    <th>Navn</th>
                                    <th>Salg</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $currentRow = 0;
                                foreach($link->query('SELECT idn,COUNT(*) FROM usr') as $row) {
                                    echo "<tr>";
                                    $currentRow++;
                                    if ($currentRow == 1) {
                                        echo "<td>????</td>";
                                    }
                                    if ($currentRow == 2) {
                                        echo "<td>????</td>";
                                    }
                                    if ($currentRow == 3) {
                                        echo "<td>????</td>";
                                    }
                                    if ($currentRow > 3) {
                                        echo "<td>$currentRow</td>";
                                    }
                                    echo "<td><img  alt='Avatar' class='avatar' src='img.png'/></td>";
                                    $sql = "SELECT * FROM usr WHERE idn='{$row['idn']}'";
                                    $resultt = $link->query($sql);
                                    if ($resultt->num_rows > 0) {
                                         while($roww = $resultt->fetch_assoc()) {
                                             echo "<td>" . $roww['fullname'] . "</td>";  
                                         }
                                    }
                                    echo "<td>" . $row['COUNT(*)'] . "</td>";
                                    echo "</tr>";
                                }
                                ?>
                                </tbody>
                        </table>
                    </div>
                </div>

CSS：

.containerrr {
    background-color: red;
    height: 900px;
    position: relative;
}

.containerrr > header {
    margin: 0 auto;
    padding: 1em;
    text-align: center;
}

.containerrr > header h1 {
    font-weight: 600;
    font-size: 3em;
    margin: 0;
}

.wrapperrr {
    line-height: 1.5em;
    margin: 0 auto;
    padding: 2em 0 3em;
    width: 90%;
    max-width: 2000px;
    
    background-color: blue;
    
    height: 100%;
}

table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    table-layout: auto;
}

我希望桌子适合容器（红色）。但现在我需要向下滚动才能查看所有表格数据。我怎样才能调整大小（在这种情况下让它变小），所以所有的行都适合红色区域，所以我不必向下滚动？我在这里错过了什么？

【问题讨论】：

在容器上设置最大高度并添加溢出 y
尝试将overflow-y: auto; 添加到.containerrr 类。
@TariqulIslam 这使它适合红色区域，但我仍然需要滚动才能看到整个表格。
@Amanda 这将是一个问题，因为您可能有很多表格行，并且很难将这些行放入高度为 900 像素的容器中。
检查这篇文章的第二个答案是否有帮助：stackoverflow.com/questions/34993813/…

标签： php html css

【解决方案1】：

在containerrr 类中添加display: flex 和flex-direction: column。

.containerrr {
    display: flex;
    flex-direction: column;
    background-color: red;
    height: 900px;
    position: relative;
}

.containerrr > header {
    margin: 0 auto;
    padding: 1em;
    text-align: center;
}

.containerrr > header h1 {
    font-weight: 600;
    font-size: 3em;
    margin: 0;
}

.wrapperrr {
    line-height: 1.5em;
    margin: 0 auto;
    padding: 2em 0 3em;
    width: 90%;
    max-width: 2000px;
    
    background-color: blue;
    
    height: 100%;
}

table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    table-layout: auto;
}

<div class="containerrr">
                    <div class="wrapperrr">
                        <center><h4>Leaderboard uke</h4></center>
                        <table>
                            <thead>
                                <tr>
                                    <th>Nr.</th>
                                    <th></th>
                                    <th>Navn</th>
                                    <th>Salg</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php
                                $currentRow = 0;
                                foreach($link->query('SELECT idn,COUNT(*) FROM usr') as $row) {
                                    echo "<tr>";
                                    $currentRow++;
                                    if ($currentRow == 1) {
                                        echo "<td>?</td>";
                                    }
                                    if ($currentRow == 2) {
                                        echo "<td>?</td>";
                                    }
                                    if ($currentRow == 3) {
                                        echo "<td>?</td>";
                                    }
                                    if ($currentRow > 3) {
                                        echo "<td>$currentRow</td>";
                                    }
                                    echo "<td><img  alt='Avatar' class='avatar' src='img.png'/></td>";
                                    $sql = "SELECT * FROM usr WHERE idn='{$row['idn']}'";
                                    $resultt = $link->query($sql);
                                    if ($resultt->num_rows > 0) {
                                         while($roww = $resultt->fetch_assoc()) {
                                             echo "<td>" . $roww['fullname'] . "</td>";  
                                         }
                                    }
                                    echo "<td>" . $row['COUNT(*)'] . "</td>";
                                    echo "</tr>";
                                }
                                ?>
                                </tbody>
                        </table>
                    </div>
                </div>

【讨论】：

有了这个我仍然需要向下滚动才能看到整个表格。