如何修复 Bootstrap 4 中的响应式表问题？答案

【问题标题】：How to fix responsive table issues in Bootstrap 4?如何修复 Bootstrap 4 中的响应式表问题？
【发布时间】：2020-11-10 10:29:28
【问题描述】：

在我的一个项目中，我正在尝试 Bootstrap 4。在项目的列表页面中，我使用 HTML 表格以及 Bootstrap 4 可用的表格类来使表格响应，但在一段时间后（当表格宽度与窗口宽度相交）在大屏幕上，Bootstrap 响应式表格类不起作用。我已经尝试了所有可能的 Bootstrap 响应表类。这是我在表格后面的代码：

<div class="card-body" id="loadContent">
    <div class="table-responsive-xl table-responsive-lg table-responsive-md table-responsive-sm table-responsive">
        <table class="table table-bordered table-striped table-hover" id="professionalTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Specialization</th>
                    <th>PCN</th>
                    <th>Grant Type</th>
                    <th>Total Grant</th>
                    <th>Payment Amount</th>
                    <th>Grant Purpose Amount</th>
                    <th>Date Expedenture</th>
                    <th>Company</th>
                    <th>Year</th>
                    <th>Month</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Example 1</td>
                    <td>Example 2</td>
                    <td>Example 3</td>
                    <td>Example 4</td>
                    <td>Example 5</td>
                    <td>Example 6</td>
                    <td>Example 7</td>
                    <td>Example 8</td>
                    <td>Example 9</td>
                    <td>Example 10</td>
                    <td>Example 11</td>
                    <td>Example 12</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

这是使用虚拟数据的问题的屏幕截图：

您是否注意到表格内容的宽度与窗口的宽度相交？

谁能告诉我如何解决这个问题？我的意思是目前水平滚动条是由浏览器创建的（因为它跨越窗口的宽度），但我希望滚动条相对于表格本身。

【问题讨论】：

由于您尚未发布minimal reproducible example，因此实际上无法回答您的问题。我们只能用你的代码猜测，没有更多了。您发布的代码完全按预期工作，没有任何问题。

标签： bootstrap-4

【解决方案1】：

您应该将代码嵌套在标签内或指定宽度。例如：<div class="row"><div class="col-md-10"><div class="card-body" id="loadContent">...</div></div> 或

<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 pt-3"><div class="card-body" id="loadContent">...</main>

希望它有效！

【讨论】：