HTML 表适合屏幕高度

Question

So this is how my page look like right now (the colors is just to see the containers):

This is my PHP code:

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

I want the table to fit the container(red color). But now I need to scroll down to see all the table data. How can I resize(in this case make it smaller), so all the rows fits the red area, so I don't have to scroll down? What am I missing here?

Answer 1

Add display: flex and flex-direction: column in containerrr class.

 .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>