Not able to change datatable td column width

Not able to change datatable td column width

MaddyMaddy Posts: 24Questions: 0Answers: 0
edited March 2012 in DataTables 1.8
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!!

Replies

  • MaddyMaddy Posts: 24Questions: 0Answers: 0
    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!!
  • MaddyMaddy Posts: 24Questions: 0Answers: 0
    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.
  • bidonbidon Posts: 28Questions: 0Answers: 0
    Maybe this is false hope, but I more or less had to do this too.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • MaddyMaddy Posts: 24Questions: 0Answers: 0
    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 :)
  • Wouter60Wouter60 Posts: 1Questions: 0Answers: 0
    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.
This discussion has been closed.