Bootstrap-table如何进行高度调整以显示数据

Question

我正在使用bootstrap-table创建我的表，它运行完美，但它看起来有点奇怪，因为高度似乎只是固定，无论其中有多少数据。因此，如果我只有6条记录，那么下面就有这个尴尬的空白空间。这是我的HTML：

<table class="table" data-toggle="table" data-page-size="10" data-pagination="true" data-search="true">
<thead>
    <tr>
        <th data-sortable="true">Username</th>
        <th data-sortable="true">Full Name</th>
        <th data-sortable="true">Points</th>
        {% for subject in subjects %}
        <th data-sortable="true">{{ subject }}</th>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% for user in users %}
    <tr>
        <td>
            <a href="{% url 'profile' username=user.username %}">{{ user.username }}</a>
        </td>
        <td>{{ user.first_name }} {{ user.last_name }}</td>
        {% for item in user.profile.points %}
        <td>{{ item.1 }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
</tbody>

这是我的页面的屏幕截图：

有关如何解决此问题的任何想法？

Answer 1

使用＆＃34; height＆＃34;属性。

 $table.bootstrapTable({
        ***height: getHeight(),***
        columns: [
            [

function getHeight() {
    return $(window).height() - $('h1').outerHeight(true);
}

See this example.