0

我正在使用 jQuery 数据表

<div id="wrapperDiv">

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

<div/>

包装器的宽度为 960 像素，表格为 1080 像素（它具有更广泛的数据）

我试过了

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

以及有前途的解决方案

jQuery DataTables：控制表格宽度

如何将列宽设置为 jQuery 数据表？

数据表宽度问题

Jquery DataTables - 表格宽度短于 dataTable_wrapper 宽度

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

4

3 回答 3

0

可以修改样式

@media (min-width: 500px) {
    .table-responsive {
        overflow-x: hidden !important;
    }
}
于 2017-07-13T19:33:23.623 回答
0

我已经断断续续地遇到同样的问题好几个月了，建议的解决方案都没有解决我的问题。今天我决定暴力破解它，它奏效了。这不是最优雅的解决方案，我也不会说它是“正确”的方法，但它确实有效并且影响非常小。

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

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

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

这很丑陋，但它会成功。

于 2015-09-01T15:14:51.067 回答
0

以下对我有用：

定义一个新的类，我叫我的“ wrappable ”。将此类添加到数据表列类使其将文本包装在单元格中，因此它不会溢出到右侧的其他单元格

table.dataTable tbody td.wrappable { white-space:normal; }

将类应用于数据表中的列

var columns = [ { data: null, title: " Request Details ", className: "all wrappable", width: '200px', sortable: true, autoWidth: false, render: function (data, type, row) { var year = 'Fiscal Year: ' + naIfNullOrEmpty(data.FISCAL_YEAR) + ''; var cycle = 'Cycle: ' + naIfNullOrEmpty(data.CdSnfCycle.NAME) + ''; var notes = '
Notes: ' + naIfNullOrEmpty(data.NOTES) + ' '; return year + cycle + notes; } }, ]

希望这可以帮助某人

于 2018-03-28T14:14:59.357 回答