使用overflow-x-auto（引导程序）围绕表格进行划分，但整个页面变得可滚动

Question

我正在使用 Blazor，其中有一个组件来加载单独的表（带有搜索和使用排序的选项）。我的桌子周围有一个 div，其类为overflow-x-auto，但它仍然使整个页面超出屏幕。

我也尝试通过 style="overflow:scroll;" 设置它，我已经通过单独的类尝试过它，但似乎没有什么可以使它工作。

我确实看到 F12 开发者工具中应用了 CSS。

我觉得我错过了一些东西。有人可以看一下我，看看我缺少什么吗？

<div class="row mb-3">
    <!-- Search Box -->
    <div class="col-lg-6 mb-1">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search..." @bind="SearchTerm" @oninput="OnSearchInputChanged" />
            <span class="input-group-text">
                <i class="bi bi-search"></i>
            </span>
        </div>
    </div>
    <div class="col-lg-4">
        <select @bind="@SelectedPeriod" class="form-select">
            <option value="" disabled>Select a Period</option>
            @foreach (var period in Periods)
            {
                <option value="@period">@period</option>
            }
        </select>
    </div>
    <div class="col-lg-2">
        <LoadingButton OnClick="async () => await RefreshReport()" InitialButtonText="Refresh" LoadingIcon="true" LoadingButtonText="Loading" w100="true" />
    </div>
</div>

<div class="row mb-3">
    <div class="col-lg-12 text-end">
        <LoadingButton OnClick="DownloadAsFile" InitialButtonText="Download" LoadingIcon="true" LoadingButtonText="Loading" ButtonStyle="btn-success" />
    </div>
</div>
@if (FilteredData != null)
{
    <div class="row mt-3">
        <div class="col-lg-12 text-start">
            <span>@(FilteredData?.Count() ?? 0) @(FilteredData?.Count() == 1 ? "row found" : "rows found")</span>
        </div>
    </div>
}
<div class="table-responsive overflow-x-auto">
    <table class="table table-hover table-sm">
        <thead>
            <tr>
                @foreach (var header in ColumnHeaders)
                {
                    if (!ExcludedColumns.Contains(header))
                    {
                        <th class="sortable-header">
                            <span style="display: inline-block;">@header</span>
                            <svg class="icon" width="16" height="16" style="display: inline-block;">
                                <use href="#fluent--arrow-sort-24-regular"></use>
                            </svg>
                        </th>
                    }
                }
            </tr>
        </thead>
        <tbody>
            @foreach (var row in FilteredData)
            {
                <tr>
                    @foreach (var header in ColumnHeaders)
                    {
                        if (!ExcludedColumns.Contains(header))
                        {
                            <td>@row[header]</td>
                        }
                    }
                </tr>
            }
        </tbody>
    </table>
</div>

编辑：一旦使用较小的屏幕，表格就会变得可滚动。

Answer 1

正如@Matthias Mertens 所说，我缺少一个周围有一定宽度的 DIV。 在所有内容上使用

<div class="vw-99"></div>

解决了问题。