无法使用引导从HTML视图中删除空白

我对下面的模板视图有问题。我在底部的“Used in”表中添加了一个滚动条，但是下面有很多空白。当我尝试逐个删除每个div/元素时，问题似乎只来自该表

view.html

{% extends "includes/base.html" %}

{% load crispy_forms_tags %}

{% block body %}

<div class="container-fluid">
    <div class="row">

        <div class="col">

            <form method="POST">
                <br>
                {% csrf_token %}
                {% crispy partform %}
            </form>
            <br>
            <table class="table table-hover">
                <tbody>
                {% for comment in partcomments %}
                <tr>
                    <td>{{ comment }}</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
            <form method="POST">
                <br>
                {% csrf_token %}
                {% crispy commentForm %}
            </form>
            <div>
                {% for image in images %}
                <img class="center img-responsive" src="{{ image.image.url }}"
                     style="height: 25%"/>
                {% endfor %}
                <br>
                <form enctype="multipart/form-data" method="post">
                    {% csrf_token %}
                    {{ imageform.as_p }}
                    <button type="submit">Upload</button>
                </form>
            </div>
        </div>

        <div class="col">
            <div class="table-wrapper-scroll-y my-custom-scrollbar">

                <table class="table table-hover mb-0">
                    <thead>
                    <tr>
                        <th>Supplier</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for supplier in partsuppliers %}
                    <tr data-href="{% url 'info_supplier' supplier.supplier.id %}">
                        <td>{{ supplier }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <a class="btn btn-secondary btn-sm btn-pad" href="{% url 'addpartsupplier' part_id=part_id %}"
               role="button">Add
                Supplier</a>
            <div class="table-wrapper-scroll-y my-custom-scrollbar">

                <table class="table table-hover mb-0">
                    <thead>
                    <tr>
                        <th>Movements</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for movement in movements %}
                    <tr>
                        <td>{{ movement.history_date }}</td>
                        <td>{{ movement.history_user }}</td>
                        <td>{{ movement.change }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="table-wrapper-scroll-y my-custom-scrollbar">
                <table class="table table-hover mb-0">
                    <thead>
                    <tr>
                        <th>Used in</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for activity in activities %}
                    <tr>
                        <td>{{ activity.group.groupName }}</td>
                        <td>{{ activity.activity.activityName }}</td>
                        <td>{{ activity.qty.quantity__sum }}</td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


{% endblock %}

我想我没有在CSS中包含一些东西。任何帮助都将不胜感激

编辑：下面添加图片以进行澄清。大量空白扩展到表结束处，没有y滚动。

---

引导将20px的边距底部应用于“.table”类。如果您在控制台中检查表格，您将能够看到该样式

要删除此项，您需要在自己的样式中超越样式规则（请注意，这必须在导入Bootsrtrap样式之后）

---

我用图片编辑了我的原始帖子。我试着删除底部边距，达到同样的效果。即使添加了滚动条，该表似乎仍保持其完整长度。

.my-custom-scrollbar
{
position: relative;
max-height: 25%;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.table {
    margin-bottom: 0;
}