如何修复表格显示的大小，以便滚动条（垂直和水平）始终可见？

Question

我的应用程序有一个宽表，可能有很多行。该表是由 django-tables2 使用 bootstrap5-responsive 模板生成的。

我的目标是向表格添加滚动条并控制表格的高度和宽度，以便表格填充屏幕的大部分空间，同时保持滚动条可见。使用 bootstrap 机制，我的表格显示宽度为 10 列。两列用于垂直菜单栏。

我可以在桌子上创建一个滚动条，但这是不可取的，因为桌子的底部可能会很远。我还没弄清楚如何限制垂直尺寸，但这可能只是另一个谷歌搜索。

我尝试过使用窗口的滚动条，但是水平滚动会将页面的标题信息滑出页面并弄乱用户体验（另外还有计划扩展标题 - 例如将表保存到文件中）。

我正在尝试的是让表格出现在一个区域中，以便滚动条始终在视图中。专用于表格的区域以适应可用空间。

下面是一张图片，以显示想要的内容，以防我的描述不清楚。在此示例中，右侧还有大约 100 行和另外 4 或 5 列。

谢谢。

Answer 1

使用 table-responsive 类将表格包裹在 div 中，并将该 div 的高度设置为最适合的高度。

<div class="table-responsive" style="height: 200px;">
  <table class="table">
    <thead>
      <tr>
        <th>Person</th>
        <th>Section</th>
      </tr>
    </thead>
    <tbody>
      {% for info, row in data.items %}
      <tr>
          <td>{{ row.person }}</td>
          <td>{{ row.section }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

Answer 2

<code>
    .container-table {
       width: 100px;
       height: 100px;
       overflow: scroll;
    }
    
    <div class="container-table">
        <table>
            <-- table content -->
        </table>
    </div>
</code>

您应该根据需要更改类名称并添加更多样式。