CODEWITHSUNDEEP
javascriptcssdatatables
SebCollard
SebCollard

Reputation: 332

Problem with the responsive of Datatables, size of column it's to bigger to the normal

I'm using Datatables and encoutered problem with the reponsiveness of the datatables with the size of columns. When datatables are defined the size of column, that is bigger and the last column of the table is no displayed. So I have tried to add a CSS class with a max-width, but it is not working.

HTML : 

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

<table class = "display" id = "datatable"></table>

CSS : 

.cell_table {
  max-width: 250px;
}

JS :

$('#datatable').DataTable({
    "sPaginationType" : "full_numbers",
    "columnDefs" : [{
        "targets": "_all",
        "createdCell" : function (td, cellData, rowData, row, col) {
            $(td).attr('id', 'cell-' + col);
        },
    }, {
        "targets" : [0, 1, 2, 3],
        "className" : "text_center cell_table",
    }],
    "lengthMenu" : [[5, 10, 20, 30, -1], [5, 10, 20, 30, "All"]],
    "iDisplayLength" : -1,
    data : data_use,
    columns : column_name,
    dom : 'lfrtip',
    responsive : true,
    destroy : true,
    searching: true,
});

Here you can find the code on JSfiddle.

Upvotes: 1

Views: 1927

Answers (1)

ProllyGeek
ProllyGeek

Reputation: 15836

You are doing something wrong, setting className twice which apparently not correct.

Fiddle

$('#datatable').DataTable({
            "sPaginationType" : "full_numbers",
            "columnDefs" : [{
                "targets": "_all",
                "createdCell" : function (td, cellData, rowData, row, col) {
                    $(td).attr('id', 'cell-' + col);
                },
            }, {
                "targets" : [0, 1, 2, 3],
                "className" : "text_center cell_table",
            }],
            "lengthMenu" : [[5, 10, 25, -1], [5, 10, 25, "All"]],
            "iDisplayLength" : 25,
            data : data_use,
            columns : column_name,
            dom : 'lfrtip',
            responsive : true,
            destroy : true,
            searching: true,
});

CSS:

.text_center{ 
    text-align : center;
}

.cell_table {
    max-width : 250px;
}

.dataTable{
  width:100%;
  max-width:100%;
}

Upvotes: 1

Related Questions