jquery datatable set width upon initialization

Question

I'm trying to set the width of a cell in a jQuery datatable upon initialization and it never seems to work. I've have tried what the official site recommends and other examples. Below are some of the options I have tried. Please help on what I'm doing wrong?

Ex: 1

$('#dataTables-comments').DataTable({
    "bLengthChange": false,
    "bFilter": false,
    "iDisplayLength": 5,
    "aoColumns": [{
            "sWidth": "50%"
        }, 
        {
            "sWidth": null
        },  
        {
            "sWidth": null
        },   
        {
            "sWidth": null
        },   
        {
            "sWidth": null
        }   
    ],
    "responsive": true
});

Ex: 2

$('#dataTables-tbl').DataTable({
    "bLengthChange": false,
    "bFilter": false,
    "iDisplayLength": 5,
    "columnDefs": [{
        "width": "50%",
        "targets": 0
    }],
    "responsive": true
});

Ex: 3

$('#dataTables-tbl').DataTable({
    "bLengthChange": false,
    "bFilter": false,
    "iDisplayLength": 5,
    "columns": [{
        "width": "50%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }],
    "responsive": true
});

davidkonrad · Accepted Answer · 2016-05-12 02:39:29Z

1

As with any other usage of a CSS percentage value, the value must be a percentage of something. If the table itself not have a defined width, then 10% is untranslatable. So give your table a width :

#dataTables-comments {
  width: 800px;
}

and be sure to turn off autoWidth so dataTables not begin to overrule the predefined column widths :

$('#dataTables-tbl').DataTable({
    autoWidth: false, //<---
    "bLengthChange": false,
    "bFilter": false,
    "iDisplayLength": 5,
    "columns": [{
        "width": "50%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }, {
        "width": "10%"
    }],
    "responsive": true
});

answered May 12, 2016 at 2:39

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

usr4896260 Over a year ago

For reason it doesn't seem to recognize the width in the datatable, but adding the styling to the css file made it work. Thanks!

Collectives™ on Stack Overflow

jquery datatable set width upon initialization

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related