Datatables - change column width using `columnDefs`

Question

I am trying to adjust the width of specific columns (wrapping long content AND headers) in a table but have not been successful.

Following the documentation here , I am still not able to adjust the width of specified columns, am I missing something?

I have the following DataTable parameters for a table with id=one and width=100% :

$(document).ready(function(){
    $('#one').DataTable({
        paging: true,
        'scrollX': false,
        'autoWidth': false,
        'columnDefs' : [
            {'targets': [0,1], 'width': '50px'}
        ],
        "iDisplayLength": 50,
        'lengthMenu': [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
        dom: 'Blfrtip',
        buttons: ['copy', 'csv', 'excel']
    });
});

I have not specified any CSS overrides in the HTML or otherwise, so maybe this is the problem?

Answer 1

What data are you putting in the column? The width property is only applied to the th element, so if there are wider elements in the column td cells they might make the column wider than you expect. For example, an image wider than 50px would make the column wider than 50px.

Answer 2

Thanks all for the responses. After some additional digging, I realized the table was being set with the class of nowrap. So annoying. After removing this class, the wrap works as required. Thank you.