简体   繁体   中英

How to specify the column width in a DataTable?

I have the following datatable:

$(function() {
    var dataTableColumns = [
        { "sType": "numeric" },     null, null, null, null, null,
        null, null, null, null, null, { "sType": "date-dayofweek" },
        null, null, null, null, null, null, { "sType": "date-dayofweek" },
        null, null, null, null, null, 
        null, null, null, null, null,
        null, null, null, null, 
        null, null, null, null,  
        null, null, null, null,  
        null, { "sType": "date" }, null
    ];

    oTable = $('#example').dataTable({
        "bPaginate" : true,
        "aaSorting": [ [0,'asc'] ],
        "aoColumns" : dataTableColumns,
        "oLanguage": {
            "sLengthMenu": 'Show <select>'+
                '<option value="10">10<\/option>'+
                '<option value="25">25<\/option>'+
                '<option value="50">50<\/option>'+
                '<option value="100">100<\/option>'+
                '<option value="-1">All<\/option>'+
                '<\/select> records'
        },
        "iDisplayLength": -1,
    });
});

Few columns in the above datatable contain text data and I want to specify width option for those columns. I tried various options bAutoWidth, sWidth, td width, css style, fnAdjustColumnSizing, but nothing seems to work.. I dont know what's going wrong.. Please help!!

I figured this out. Gave the following option in table's html declaration style (width: 4000px) and bAutoWidth: false. I know this a brute-force method to fix things, but I have no other choice. I really didn't like the column widths set by datatable.

If you are using DataTable 1.10.x or newer, you must know that the autoWidth parameter must be set to false to make it work properly.

See this example:

$('#example').dataTable( {
  "autoWidth": false,
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

Note: Even the official documentation won't tell you that.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM