Datatable responsive width more than parent width

Question

Even using responsive option in jquery datatables it happens that in lower resolutions the calculated width of table is more than the parent div, so this is happening:

The table is defined like this:

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

And the datatables script called like this:

/* 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();   
});

Btw, this question is about the same i'm asking: jQuery DataTables: control table width Also i'm using version 1.10.2 of datatable.js

Does anyone had this problem and/or knows the solution? Thanks.

Answer 1

May be this link helps you. https://datatables.net/extensions/rowreorder/examples/initialisation/responsive.html

Sub table in each row.

Answer 2

Here's what worked for me:

1. Define a new class, I called mine "wrappable". Adding this class to datatable column class makes it wrap text in cell so it does not overflow to other cells on the right

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

2. Apply class to column in your dataTable

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

Hope this helps.