数据表从容器DIV中生成 - data table grows out of container DIV

data table grows out of container DIV

本文关键字：DIV 数据表 | 更新日期: 2023-09-27

我使用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: control table width

如何设置列宽度的jQuery数据表?

数据表宽度问题

Jquery DataTables -表宽度小于dataTable_wrapper宽度

它们都不适合我，作为一种变通方法，我增加了包装器DIV的宽度以适合数据表。任何帮助吗?

我已经断断续续地遇到这个问题好几个月了，没有一个建议的解决方案可以解决我的问题。今天我决定用蛮力来解决这个问题，结果成功了。这不是最优雅的解决方案，我也不会说这是"正确"的方法，但它是有效的，而且影响很小。

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

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

可以修改样式

@media (min-width: 500px) {
    .table-responsive {
        overflow-x: hidden !important;
    }
}

下面的方法对我很有效:

定义一个新类，我把我的命名为"wrappable"。将此类添加到数据表列类中，使其在单元格中换行文本，从而不会溢出到右侧的其他单元格

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

在dataTable

中为列应用class

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; } }, ]

希望对大家有所帮助