php - 数据表长出容器DIV

Question

我正在使用 jQuery 数据表

<div id="wrapperDiv">

<table id="dataTable"> <!-- data --> </table>

<div/>

wrapper 的宽度为 960 px，table 为 1080 px(它具有更宽的数据)

我试过了

-    setting width: 100% in table tag inline CSS
-    setting overflow-x auto; in table tag

以及来自

的有前途的解决方案

jQuery DataTables: control table width

How to set column widths to a jQuery datatable?

DataTables width problem

Jquery DataTables - Table width is shorter than dataTable_wrapper width

它们都不适合我，作为一种解决方法，我增加了包装器 DIV 的宽度以适应数据表。 有帮助吗？

Answer 1

几个月来我一直遇到同样的问题，建议的解决方案都没有解决我的问题。今天我决定对其进行暴力破解，结果成功了。这不是最优雅的解决方案，我也不会说这是“正确”的解决方案，但它确实有效并且影响非常小。

$(document).scroll(function() {
            var greatestWidth = 0;
            $('.dataTable').each(function() {
                if (greatestWidth < $(this).width()) {
                    greatestWidth = $(this).width();
                }
            });

            $('#yourcontainer').width(greatestWidth);
        });

基本上，每当用户滚动时，我只是尝试找到最大的表格(也适用于高度)，然后将容器设置为该宽度。我必须这样做的原因是我使用 ajax 和一些 API 来填充数据和设置，因此表格在完成之前会自行调整几次大小。由于事后发生的一些调整大小和重新格式化，DataTables 完整功能都不起作用，并且 $(document).ready() 不起作用，因为表格在文档加载后发生更改。

它很丑，但它可以解决问题。