Table Headers Width Too Small

opeth58

Hello, I have the following object:
oTable = $("#adlogs").dataTable({
bJQueryUI: true,
bAutoWidth: false,
bScrollCollapse: false,
bPaginate: false,
bProcessing: true,
bLengthChange: false,
//aoColumns: [{"sWidth":"68px"},{"sWidth":"61px"},{"sWidth":"81px"},{"sWidth":"81px"},{"sWidth":"387px"}],
aoColumns: [{sWidth:"10%"},{sWidth:"10%"},{sWidth:"12%"},{sWidth:"11%"},{sWidth:"57%"}],
bScrollInfinite: true,
sScrollY: "407px",
iDisplayLength: 22,
fnDrawCallback: function() {
//clickRowHandler();
}
});
oTable.fnAdjustColumnSizing();
oTable.fnDraw();

When the table is first displayed, the table headers are too narrow. They are in the proper order but not properly sized. When looking in Firebug i noticed that the widths were rendered in px not % ie. 10px instead of 10%. Once i click on a header to sort, the headers expand to their proper size. I've tried this with 1.9 as well. I've noticed too that if i take the sScrolly line out, the headers display fine but then the table expands beyond the parent div.

Lightman

Call oTable.fnAdjustColumnSizing() once your datatable is appended to the page and not before or after fnDraw() I guess.

opeth58

Fixed it with jquery css call.

$("#tabs-4 .dataTables_scrollHeadInner").css("width","720px");
$("#tabs-4 .dataTables_scrollHeadInner table").css("width","705px");

Plug in whatever values you need. In my case 720 & 705. Now works on initial display.

marcus

I'm having the same problem with infinite scrolling tables and having to call fnAdjustColumnSizing() after the table is rendered to get them to size properly.