更改窗口大小和在导航选项卡之间切换时，数据表无法正确调整大小

Question

在我的网页中，我有一个带有两个选项卡的导航选项卡栏。每个选项卡都有一个单独的数据表。当我最初加载页面并在选项卡之间切换时，表格正确呈现。但是，当我调整窗口大小并在选项卡之间切换时，调整大小时不可见的表格现在无法正确呈现。然后，我调整窗口大小，并且表格按预期调整大小，但当我切换回另一个选项卡时，表格未正确呈现。

在页面的 html 部分中，我将表格的宽度指定为 100%。

以下是我用来构建和显示表格的 JavaScript/Jquery。

var some_table = $('#some_table');

function load_some_table() {
    table = some_table.dataTable({
        "dom": 'T<"clear">lfrtip',
        "destroy": true,
        "autoWidth": true,
        "scrollX": true,
        "order": [[2, "desc"]],          
    });
}

$(document).ready(function() {
    load_some_table();
});

$(window).resize( function () {
    some_table.fnAdjustColumnSizing();
});

那么在选项卡之间切换和调整浏览器窗口大小时如何使其正确呈现？

Answer 1

我自己似乎已经解决了这个问题。我什至不需要函数 fnAdjustColumnSizing。如果在初始化时设置

"autoWidth": false

，则数据表会在浏览器调整大小时调整列大小。但似乎违反直觉。