jQuery dataTable : How to know width applied to each column

Question

I'm creating two tables, one for normal rows (table1), and another for total row(s) (-table2). I would like to have the width for table1 automatic , and apply same widths to table2. I tried to get the widths of table1 in table 2 drawCallback and apply the same :

"fnDrawCallback": function (oSettings) {
  var i=0;
  jQuery('#table1 tbody tr:last td').each(function () {
    jQuery('#table2 tbody tr td:eq(' + i + ')').width(jQuery(this).width());
    i++;
  });
}

But sometimes, the width of table1 last row is returned as 0. So, is there any way, that I can query the data table1 object, and get the width applied for it?

Answer 1

dataTables set the width of the <th> elements, not <tbody> <td> 's. If you are not adding inline CSS to your headers (and basically that should never be necessary) the easiest is simply to copy dataTables injected style attribute, which contains the calculated widths "width: 63px;" etc :

drawCallback: function() {
   jQuery('#table1 thead th').each(function(i,th) {
      jQuery('#table2 thead th:eq('+i+')')
         .attr('style', jQuery(th).attr('style')) 
   })
}

demo -> http://jsfiddle.net/51jLt8og/