Header body cell width inconsistencies

joey_halloran

Hi,

I am trying to get a datatable to scroll in both the x and y axis but I am having problems. In short the body's cell's width is different from the header's cell's width which leads to the data being misaligned to the header.

This is what I am using to initialize the grid:

$(document).ready(function () {
table = $('#RateCodeAttributeChartFrameGridTable').dataTable({
"sScrollY": "700px",
"sScrollX": "900px",
"sScrollXInner": "110%",
"bSort": false,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false
});
new FixedColumns(table);
var gridHeight = $("#RatesChartAttributesFrameGridTableSurround").height();
$(".dataTables_scrollBody").height(gridHeight-55);
$(".DTFC_LeftBodyWrapper").height(gridHeight-55);
$(".dataTables_scrollBody").height(gridHeight-55);
$(".DTFC_LeftBodyWrapper").height(gridHeight-55);
table.fnAdjustColumnSizing();

});

Note: I'm having to re-assign the height as otherwise the horizontal scroll bar disappears of the bottom of the screen, hence the height stuff. Also want the horizontal titles to not scroll hence the fixed columns.

I have also tried applying a css class to both the header and column cells but it gets overwritten.

Would appreciate any help.

Thanks.

joey_halloran

Figured it out, using min width in the css solves the issue.