Column Header not aligned with column data with horizontal scrolling
Column Header not aligned with column data with horizontal scrolling
Hi,
I have looked through the forum but haven't found a fix. I have a page with a large data table having 141 columns and horizontal scrolling. The column header doesn't seem to align with the column data. Its not even close in many cases. I load both the column info and data using json but the json arrays are consistent in length. i have tried calling the function to adjust column width but that doesn't seem to help either. I am using the latest version of datatables, jquery ui, jquery, etc.
Here is a demo of the issue.
http://demo.tetonlabs.com/
any ideas or help would be appreciated.
Thanks
Sean
I have looked through the forum but haven't found a fix. I have a page with a large data table having 141 columns and horizontal scrolling. The column header doesn't seem to align with the column data. Its not even close in many cases. I load both the column info and data using json but the json arrays are consistent in length. i have tried calling the function to adjust column width but that doesn't seem to help either. I am using the latest version of datatables, jquery ui, jquery, etc.
Here is a demo of the issue.
http://demo.tetonlabs.com/
any ideas or help would be appreciated.
Thanks
Sean
This discussion has been closed.
Replies
`cellpadding="0" cellspacing="0" border="0"`
to your table's HTML.
Its the cellspacing which is particularly important, it makes the width/height calculations of the table cells simply impossible to deal with otherwise... (not as in difficult, as in impossible :-) ). It would work without scrolling, but not with since it gets split into two tables.
Allan
Next I tried removing all padding for any cells and that got closer to aligned but didn't totally resolve it if a cell was really wide and came into view as a result of sorting. I then played around with the box-sizing css value and that also got it close but not totally resolved. The zurb foundation uses box-sizing: border-box which might mess up something. I set the css on the datatable to use content-box but still not totally resolved. Any other ideas.
div .dataTables_wrapper {
box-sizing: content-box !important;
}
..but no luck.. If anyone can suggest any other approach it would be much appreciated..
Goran
Allan
Allan
.rceDataTable * {
box-sizing: initial;
}
[/code]
Where '.rceDataTable' is a query for the table, the style must be put after the bootstrap's and datatable's css.
This worked for me bootstrap3 rc1 and datatable (1.9.4)
Here is a test case, http://jsfiddle.net/tazmaniax/KFxbL/, and the associated debug info http://debug.datatables.net/unovum
In this test case I've used datatables 1.9.4 with the latest datatables bootstrap css and js (https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/2). I've also tested with dataTables 1.10 (http://jsfiddle.net/tazmaniax/xKBqm/) without any improvement.
Ultimately I would like to also have "sScrollXInner": "150%" and FixedColumns enabled but doing this just makes it much worse.
Chris
Allan
Apart from that when I uncomment the "sScrollXInner": "150%" config Safari begins to become unstuck like Chrome but Firefox seems to still retain its composure. Adding FixedColumns to the mix seems to break it even more especially when resizing the window. Interesting FixedColumn without "sScrollXInner": "150% seems to work better.
Allan
Thanks for the tip on sScrollXInner :)
http://minisq.com/gmap/
you go under the map (list of store)
click "select all" on this table (this table is fine...)
and then click "Sales Volume for Selected Stores" (under the table..)
the popup with the table will appear!
please share any difficulties here thanks!
if was then the "whole window" scroll could do the work...
It needs to be `border-collpase: separate;` for scrolling alignment. The collapse option causes all sorts of problems with the column width calculations. The collapse option is removed in the dev versions of the DataTables CSS.
> Also one more issue in the same table is that "merged" headers are not exported in Excel or Pdf format!
I don't understand. The header is shown int he PDF output file when I export the table.
Allan
my initialization code:
[code]
var mmm = jQuery("#detailstable").dataTable({
"bRetrieve": true,
"bJQueryUI": true,
"scrollX": "100%",
"bScrollCollapse": true,
"bPaginate": false,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/gmap/components/com_storelocator/assets/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
"copy",
"csv",
"xls",
{
"sExtends":"pdf",
"sTitle":"Store Report",
"sPdfOrientation":"landscape",
"sPdfMessage": ""
}
]
}
} );
[/code]
thanks!
about the "header printing" i changed the table not to have "merged" th ... that's why now prints right..
Before only the non - merged th was exported in the excel, pdf etc..
[code] "bScrollCollapse": true [/false]
and
[code] "sScrollXInner": "150%" [/false]
with no change...
Allan
tha table tag with id = 'detailstable' has separate!
border-collapse: separate;
}[/code]