根据返回的 tables 调整 bootstrap table 的高度

Question

我有几个 table 被返回的页面，其中可能只包含几条记录。您可以在我的网站 this page 上看到示例，其中 table 包含 2 个和三个字母的单词只有几条记录。 table 的其余部分在底部为空白，直到达到 table 的完整高度。我想要的是根据返回的记录数量自动调整 table 所以没有白色 space.

我每次分页最多显示 10 条记录，所以基本上，如果返回的记录少于 10 条，则需要调整高度，否则它可以具有完整高度，即 height: 538，即数量基于 10 条记录高度的像素数。

我正在使用 javascript table 所以这是我的代码

var $table = $('#table-javascript-2').bootstrapTable({
    method: 'get',
    url: '2.json',
    height: 538,
    cache: false,
    pagination: true,
    search: true,
    pageSize: 10,
    pageList: [10, 25, 50, 100],
    sortable: true,
    minimumCountColumns: 2,
    columns: [{
        field: 'word',
        title: '2 Letter Words',
        align: 'left',
        width: '20'
    },{
        field: 'score',
        title: 'Scrabble&reg; Points',
        align: 'left',
        width: '20',
        sortOrder: 'desc'
    }]
});

<table id="table-javascript-2"></table>

如果少于10条记录，是否可以调整table的高度？

Answer 1

您可以简单地删除 table 的特定高度并使其动态变化。给每一行一定的填充，这样你就可以得到你想要的 10 行高度，一切都应该很好。

根据返回的 tables 调整 bootstrap table 的高度

adjust height of bootstrap table based on tables returned

twitter-bootstrap

bootstrap-table