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

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>

标签： htmlcss

Answer 1

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