Question

在我的一个项目中，我尝试使用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>

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

您是否注意到表格内容的宽度超过了窗口的宽度？

任何人都可以告诉我该如何解决这个问题？我的意思是目前水平滚动条是由浏览器创建的（当它穿过窗口的宽度时），但我希望滚动条相对于表本身。

Answer 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>

希望它能起作用！

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

1 个答案: