Question

我希望在我的网站上有一个固定大小并允许滚动的表格。现在该表占据了整个页面，因为它有很多行数据。我想限制高度并使表格可滚动，这样它就不会占据整个页面。这是我的表格代码。我试图将表格包装在 div 中并设置 overflow: auto 但这似乎不起作用。

<table class="table table-dark">
    <thead class="thead-light">
    <tr>
        <th>State</th>
        <th>County</th>
        <th>Total cases reported</th>
        <th>Changes since last day</th>
    </tr>
    </thead>
    <tr th:each="locationStat : ${locationStats}">
        <td th:text="${locationStat.state}"></td>
        <td th:text="${locationStat.country}"></td>
        <td th:text="${locationStat.latestTotalCases}">0</td>
        <td th:text="${locationStat.dailyChange}">0</td>
    </tr>
</table>

Answer 1

固定桌子高度。像 300px 左右的东西。它制作了一个虚拟滚动条

Answer 2

尝试关注代码

<table class="table table-dark table-responsive" style="height:500px;width:100%">
    <thead class="thead-light">
    <tr>
        <th>State</th>
        <th>County</th>
        <th>Total cases reported</th>
        <th>Changes since last day</th>
    </tr>
    </thead>
    <tr th:each="locationStat : ${locationStats}">
        <td th:text="${locationStat.state}"></td>
        <td th:text="${locationStat.country}"></td>
        <td th:text="${locationStat.latestTotalCases}">0</td>
        <td th:text="${locationStat.dailyChange}">0</td>
    </tr>
</table>

如何使表格可滚动并具有固定高度

2 个答案: