Clarification on sWidth

flarpy

Hi Allan

Please can you clarify something for me; I'm setting sWidth for each column but it seems those widths are not being honoured. The example you can look at is the events columns (row 2 of aoColumnDefs). I would expect the header for this column to be 150px but it is actually 221px.

Config:

[code]
var oTable = $('#programtable').dataTable( {
"bProcessing": true,
"bServerSide": false,
"bDeferRender": false,
"sAjaxSource": '/affiliates/529/program/index/downloadprogramsjoined?format=json',
"aoColumnDefs": [
{"mData":"name","sTitle":"Program","sClass":"name","sWidth":"","aTargets":[0],"bVisible":true,"mRender":function (data, type, row) {return renderNames(data, type, row);}},
{"mData":"events","sTitle":"Commissions","sClass":"events","sWidth":"150px","aTargets":[1],"bVisible":true,"mRender":function (data, type, row) {return renderEvents(data, type, row);}} .......... TRUNCATED
"bScrollInfinite": true,
"bScrollCollapse": true,
"bAutoWidth": true,
"sScrollY": "600px",
"sScrollX": "600px",
"bStateSave": false,
"fnInitComplete": function (){
// makeFooter();
$('#programtable_filter').append('');
$('#columnChooserButton').click(function(){
$('#columnChooser').dialog({
show: "blind",
hide: "explode",
width: 620,
title: 'Choose columns',
modal: false,
});
})
$('#programtable_filter input[type=text]').focus();
}
} );

[/code]

This is what is rendered in the column header

[code]
ProgramCommissionsAffiliate approvalCategories# productsAv Comm.1Av clk2sale time1CookieEPHC1CTR1Conv1

[/code]

allan

I really must write a knowledge base article about this topic sometime - sWidth is a tricky beast and no mistake!

Basically sWidth is a guideline for DataTables indicating what you would like the width to be. DataTables (or more specifically the browser itself) will overrule your decision if it isn't possible to exactly apply your width for whatever reason (and there are a million of them - mainly content, widths not adding up, box model differences).

The way DataTables works with width is that it calculates a 'worst case' table (the header + longest strings in the body) and applies your widths to that. It then sticks that in to the DOM and lets the browser manipulate it as it sees fit (again, content is the main reason why widths might need to change). DataTables will then read the calculated values back and apply them to the table (hence why there might be a discrepancy).

Basically put, there is (almost) no way to get pixel perfect alignment with complex tables such as those used in DataTables.

The reason I say almost is that there is actually an CSS property which can be used to get pixel perfect layout - `table-layout: fixed` which will override the browser's width calculates and apply your widths directly. You could try it to see what happens and see why the browser (and thus DataTables) is resizing your columns - but DataTables is not tested with this property set and it can do some undesirable things (overflowing content etc).

Hope this helps!
Allan

flarpy

Very helpful thanks. The other approach that works is to give each column a class and then just fiddle with the css. However, as you say, that means the some columns have overflow issues.

To be continued .... :)

michael_s

allan,
Thanks for this post, it addressed my question also.

-Mike