Bootstrap Table动态设置高度问题：数据下方存在空白区域

嘿，我之前也碰到过这个Bootstrap Table空白过多的问题，给你几个实用的方案来搞定它：

方案一：根据数据行数计算固定高度 #

你可以先预估每行的高度（或者直接获取实际行高），结合表头高度来计算表格的总高度，然后在初始化时传入height参数：

// 先获取数据长度
const dataCount = reservations.length;
// 假设表头高度为50px，每行数据行高度为40px（可根据实际样式调整）
const headerHeight = 50;
const rowHeight = 40;
// 计算总高度
const tableHeight = headerHeight + (dataCount * rowHeight);

// 初始化表格时设置高度
$('#table').bootstrapTable({
    data: reservations,
    height: tableHeight,
    // 可选：加上最大高度限制，避免超出视口
    // height: Math.min(tableHeight, $(window).height() - 100)
});

如果你的行高不是固定的（比如内容会换行），可以换成动态获取行高的方式：

// 先渲染表格，再获取实际行高
$('#table').bootstrapTable({data: reservations});
// 等待渲染完成后计算
setTimeout(() => {
    const headerHeight = $('#table thead').height();
    const rowHeight = $('#table tbody tr:first').height() || 40;
    const tableHeight = headerHeight + (reservations.length * rowHeight);
    $('#table').bootstrapTable('resetView', {height: tableHeight});
}, 100);

方案二：让表格自然自适应高度 #

如果不需要固定高度，直接去掉height配置项，让表格根据内容自动收缩，配合fitColumns选项让列宽自适应，就能避免多余空白：

$('#table').bootstrapTable({
    data: reservations,
    fitColumns: true, // 开启列宽自适应，避免横向滚动条
    // 不要设置height参数，让表格随内容高度变化
});

这个方案最省心，适合不需要固定表格容器高度的场景，表格会完全贴合内容的高度。

方案三：监听数据加载事件动态调整 #

利用Bootstrap Table的onLoadSuccess事件，在数据加载完成后再计算并设置高度，这样能更准确地适配实际渲染后的样式：

$('#table').bootstrapTable({
    data: reservations,
    onLoadSuccess: function(loadedData) {
        // 获取表头实际高度
        const headerHeight = $('#table thead').outerHeight();
        // 获取每行的实际高度（取第一行的高度作为基准）
        const singleRowHeight = $('#table tbody tr').first().outerHeight() || 40;
        // 计算总高度
        const totalHeight = headerHeight + (loadedData.length * singleRowHeight);
        // 重置表格视图高度
        $(this).bootstrapTable('resetView', {height: totalHeight});
    }
});

这个方法特别适合异步加载数据的场景，能确保数据完全加载后再调整高度，避免计算偏差。

额外提示 #

• 如果你的表格开启了分页，记得用当前页的数据长度来计算高度，而不是总数据量；
• 如果你之前给表格设置了固定高度的CSS样式（比如style="height: xxxpx"），记得先移除它，否则会覆盖JS设置的高度。

内容的提问来源于stack exchange，提问作者Kacper Nitubydz