Problem: the responsive defines the size too large to normal.

SebCollard

I have a 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.

colin

Hi @SebCollard ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SebCollard

@colin It's easier to replicate the issue with FF or Safari and the JSfibble I pass in the post.

colin

Hi @SebCollard ,

Ah sorry, I missed that. I'm trying it with that CSS removed, and I'm not seeing the problem. Please can you give step-by-step instructions on how to reproduce.

Cheers,

Colin

SebCollard

@colin To resolve my problem I delete the responsive and I add a scroll bar for table when the size of the window is too small.