html - 如何强制 div block 内的 HTML 表格仅扩展到页面底部？

Question

有一个 HTML 表格，其中包含用于将新行插入表格底行的表单。创建新行时，表格会扩展到顶部和底部。我的表格位于页面顶部附近，所以最终表格会从页面中消失 我怎样才能让它稳定在顶部并只延伸到底部？ CSS:

.table {

    margin-top: 3%;
    width:1060px;
    margin-left: calc( (100vw - 1065px ) /2);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.table th {
    padding: 15px;
    text-align: center;
    color: #4CAF50;
}
.table td{
    align-items: center;
    padding: 15px;
    text-align: center;
    color: #000000;
}

HTML:

<div class="table"  align="center">
    <div style = "background-color:#FFFFFF; padding:20px;"><b>Departures Table for workers</b></div>
    <table border="1" width="700" id="train_table">
        <thead>
        <tr>

            <th>ID</th>
            <th>Train Company</th>
            <th>Destination</th>
            <th>Time</th>
            <th>Platform</th>
            <th>Date</th>
        </tr>
        </thead>
        <tbody>
        <!-- Uses php while for displaying of the rows of Trains table -->
        <?php while ($row = mysqli_fetch_assoc($result)): ?>
            <tr id="row<?php echo $row['id'];?>">
                <td><?php echo $row['id']?></td>
                <td align="center" id="name<?php echo $row['id']?>"><?php echo $row['Traincompany'];?></td>
                <td align="center" id="destination<?php echo $row['id']?>"><?php echo $row['Destination'];?></td>
                <td align="center" id="time<?php echo $row['id']?>"><?php echo $row['Time'];?></td>
                <td align="center" id="platform<?php echo $row['id']?>"><?php echo $row['Platform'];?></td>
                <td align="center" id="date<?php echo $row['id']?>"><?php echo $row['Date'];?></td>
                <td>
                    <input type='button' class="edit_button" id="edit_button<?php echo $row['id'];?>" value="edit" onclick="edit_row('<?php echo $row['id'];?>');">
                    <input type='button' class="delete_button" id="delete_button<?php echo $row['id'];?>" value="delete" onclick="delete_row('<?php echo $row['id'];?>');">
                    <input type='button' class="save_button" id="save_button<?php echo $row['id'];?>" value="save" onclick="save_row('<?php echo $row['id'];?>');">
                </td>
            </tr>
        <?php endwhile ?>
        <!-- The bottom row of the table is for inserting information in the table -->
        <tr id="new_row">
            <td>New ID will be given automatically</td>
            <td><input  type="text" id="new_Train_company" v placeholder="Company name"></td>
            <td><input  type="text" id="new_Destination" placeholder="Destination"></td>
            <td><input  type="time" id="new_time"></td>
            <td>
                    <select id="new_platform">
                      <option value = '1'>1</option >
                      <option value = '2'>2</option >
                      <option value = '3'>3</option >
                      <option value = '4'>4</option >
                    </select>
            </td>
            <td><input type="date" id="new_date" ></td>
            <td><input type="button" id="insert_row" value="Insert Row" onclick="insert_row();"></td>
    </tr>
    </tbody>
</table>

Answer 1

此 CSS 使表格稳定在顶部，并且只到页面底部，而不是更多。希望这就是您的意思。

只需将这两个 css block 添加到您的 CSS 中:

html {
    height:100%;
}
body{
    height:100%;
}

然后在 .table 中，我添加了 display:block, max-height:88% , overflow-y:auto; overflow-x:hidden 并且我将宽度更改为 1084px 以便为溢出时可能弹出的滚动条腾出空间。

.table {
    display:block;
    max-height: 88%;
    overflow-y:auto;
    overflow-x:hidden
    margin-top: 3%;
    width:1084px;
    margin-left: calc( (100vw - 1065px ) /2);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

如果这不是你想要的，试着再澄清一点