Jquery 数据表在调整大小时丢失水平滚动条

Question

我有一个有趣的问题，我以为我用一个笨拙的解决方案解决了，但我只解决了一半。 我正在为 Jquery 使用数据表，并且我正在从数据库加载数据以填充表。

我应该注意到，一直在使用 Firefox 进行开发。

另外，我有一个水平滚动条，前五列是固定的。 这会带来一个问题，因为在加载所有数据之前，数据表会放入一个水平滚动条。 滚动条初始化后加载的部分数据长度较长，从而使列宽变大。

为了解决这个问题，我只需调用调整大小

<script type="text/javascript">
setTimeout(function(){
    window.dispatchEvent(new Event('resize'));
},2000);
</script>

这里发生的事情是我看到页面加载，表格最初被弄乱了，但是经过短暂的延迟（由于我给超时时间而应该少于 2 秒），表格自行修复因为窗口调整大小。

我以为问题已经解决，直到我开始在 Chrome 中进行测试。 表格一开始会乱七八糟，就像在 Firefox 中一样，但是一旦调用了调整大小，表格就会水平延伸，失去水平滚动条，而 chrome 窗口得到一个。 这并不理想，因为滚动条的目的是将表格保持在屏幕尺寸的宽度内。

为了包含表格的宽度，我使用以下 CSS：

div.dataTables_wrapper{
    width: 96vw;
    margin: 0 auto;
}

我这样定义表格。

$(document).ready(function() {
    $('#example').dataTable( {
        "scrollX": true
    } );
} );

new $.fn.dataTable.FixedColumns(example,{
    leftColumns:5
});

任何帮助表示赞赏。

Answer 1

您必须将datatables_scrollBody的width强制为100% ，以保持水平条可见。

.dataTables_scrollBody {
    width: 100%!important;
}