数据表响应宽度大于父宽度答案

【问题标题】：Datatable responsive width more than parent width数据表响应宽度大于父宽度
【发布时间】：2017-11-19 01:19:50
【问题描述】：

即使在 jquery 数据表中使用响应选项，在较低的分辨率下，计算出的表宽度也会大于父 div，所以会发生这种情况：

表是这样定义的：

<table id="datatableGroupsList" class="table table-striped table-bordered responsive no-wrap table-hover partialViewPanel" cellspacing="0" width="100%">

数据表脚本是这样调用的：

/* Datatables responsive */
var dataTableGroupList = function () {
    var table = $('#datatableGroupsList').DataTable({
        responsive: true,
        "columns": [null, null, null, { "orderable": false } //Desabilitar ordenação na coluna das acções
        ],
        language: {
            url: window.location.origin + '/Home/GetLocalizationForDataTable'
        },
        paging: true
    }).on("init", function () {
        var tt = new $.fn.dataTable.TableTools(table,
            {
                "aButtons": [
                    {
                        "sExtends": "copy",
                        "sButtonText": "@Resources.ResourcesGeneral.Copy",
                        "mColumns": [0, 1, 2]
                    },
                    {
                        "sExtends": "xls",
                        "mColumns": [0, 1, 2]
                    },
                    {
                        "sExtends": "pdf",
                        "mColumns": [0, 1, 2]
                    },
                    {
                        "sExtends": "print",
                        "sButtonText": "@Resources.ResourcesGeneral.Print",
                        "mColumns": [0, 1, 2]
                    }
                ]
            }
            );
        $(tt.fnContainer()).insertBefore('#datatableGroupsList_wrapper div.dataTables_filter');
        $('.DTTT_container').addClass('btn-group');
        $('.DTTT_container a').addClass('btn btn-default btn-md');
        $('.dataTables_filter input').attr("placeholder", "@(Resources.ResourcesGeneral.Search)..."); 

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

顺便说一句，这个问题和我问的差不多： jQuery DataTables: control table width 我也在使用 1.10.2 版的 datatable.js

有没有人遇到过这个问题和/或知道解决方案？谢谢。

【问题讨论】：

标签： jquery datatable

【解决方案1】：

也许这个链接对你有帮助。 https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html

每一行的子表。

【讨论】：

您好，我不知道行重新排序如何帮助我解决问题。不过谢谢你的建议。

【解决方案2】：

这是为我做的：

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

table.dataTable tbody td.wrappable { 空白：正常； }
将类应用于数据表中的列

var 列 = [ { 数据：空，标题：“请求详细信息”， className: "所有可包装", 宽度：'200px', 可排序：真，自动宽度：假，渲染：函数（数据，类型，行）{ var year = '财政年度：' + naIfNullOrEmpty(data.FISCAL_YEAR) + ''; var cycle = '循环：' + naIfNullOrEmpty(data.CdSnfCycle.NAME) + ''; var notes = '
注释：' + naIfNullOrEmpty(data.NOTES) + ' '; 返回年份+周期+备注； } }, ]

希望对你有帮助

【讨论】：