Not able to change datatable td column width

Maddy

Hi, 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 '+
'10<\/option>'+
'25<\/option>'+
'50<\/option>'+
'100<\/option>'+
'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!!

Maddy

Allan, please help.. I'm stuck with this issue since 1 week.. and I'm relatively new to php, JS, html, css.. Thanks in advance!!

Maddy

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.

bidon

Maybe this is false hope, but I more or less had to do this too.

allan

You can just set the width on the TH elements in the table header as you would do when not using DataTables. There is also the sWidth option.

Also, an example would be really useful to see what you are trying to achieve and where it is going wrong :-)

Allan

Maddy

Thank you Allan. Yes, I have given sWidth option for now. But I really don't want to specify sWidth option because there are 40+ columns with around 15 columns with variable length data. If td is empty, I want datatable to compress the column size rather than taking the hard-coded width.

Here's the working example of my datatable-

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

dataTableColumns contain table headers and sWidth option for few columns.
HTML code -


Please let me know if you have any other inputs. Thanks much :)

Wouter60

In my case, the default css properties voor td en th caused the problem. A few of my columns required a width of less then 20px (i.e. for displaying a button), but the total of left and right padding exceeded that desired width. The effect was that the browser ignored the column-width. I set the left and right padding to 0, and now everything works fine.