Column Header not aligned with column data with horizontal scrolling

spbrogan

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

spbrogan

Adding that the table is contained in a Zurb Foundation 3 Grid (the grid cell is taking all twelve cells of the row). I don't think this will have impact but you never know.

allan

Try adding:

`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

spbrogan

so since this is HTML5 cellspacing and cellpadding are invalid attributes ( I did add them but no change).

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.

ggovedar

Hi, did you ever manage to get this to work? I'm having the same problem with ZURB Foundation 3.. the global box-sizing property set in foundation.css seems to be the problem, as soon as this is removed the table renders correctly.. unfortunately the rest of the page that uses foundation looks terrible... I've tried adding the cellpadding="0" cellspacing="0" border="0" on the table itself but it had no effect, also tried
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

PLease link to a test case showing the problem

Allan

jhecking

Same problem here with Bootstrap (v3.0.0-RC1). Bootstrap is setting box-sizing: border-box globally as well. The only way I've found to get the table headers aligned properly is by removing this rule from bootstrap.css. (Which makes the rest of the page look like crap... :-( )

allan

Can you link to a test case showing the issue please?

voikester

Yeah I am facing the same issue. But I am using bootstrap 2.3.2. If I don't use scrolling the alignment is fine, but with horizontal scrolling the table headers (and footers) are not aligned with the data and when I click on table head to sort, the columns realign and look okay. Any ideas?

allan

Yes, please link to a test case :-)

Allan

unstatablesoul

[code]

.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)

tazmaniax

I'm also having a problem with header/data column alignment and bootstrap 2.3.2 and horizontal scrolling.

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

Are you using Chrome? If so, I think this is a Chrome bug: http://datatables.net/forums/discussion/17714 . I've just tried your JSFiddle example and it appears to work okay in Safari.

Allan

tazmaniax

Yes I am using Chrome and yes it does look like it could be the Chrome bug as you say - thanks for the heads up. I'll have a look at the mentioned work arounds.

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

I'd suggest trying not to use sScrollXInner at all actually - I think I made a mistake putting it in. It will still be present in 1.10 for backwards compatibility, but removed from the documentation. Without it, the table will scroll as much as needed. You can force it to scroll using CSS paddings and white-space controls.

Allan

tazmaniax

Allan,

Thanks for the tip on sScrollXInner :)

Dekari

hello there... cannot do this... not plays even in other browser than chrome!

Dekari

i ommited the sScrollXInner columns are ok but no scroll!

allan

@Dekari - Please link to a test case.

Dekari

ok the url is:

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!

Dekari

the "now" proble is that the main data is not aligned to header - footer...

if was then the "whole window" scroll could do the work...

Dekari

Also one more issue in the same table is that "merged" headers are not exported in Excel or Pdf format!

allan

> border-collapse: collapse;

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

Dekari

xmmm can't make it work right.. i have changed css and addded [code]border-collpase: separate;[/code] but no scroll... Table extends our of the popup and header / footer of the table is 100% align on the popup...

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..

Dekari

*remark* i tried also with
[code] "bScrollCollapse": true [/false]
and
[code] "sScrollXInner": "150%" [/false]

with no change...

Dekari

any thoughts?

allan

The demo page you linked to still has: border-collapse: collapse; .

Allan

Dekari

no can't be i just checked!
tha table tag with id = 'detailstable' has separate!

Dekari

css rule [code]#detailstable {
border-collapse: separate;
}[/code]

Dekari

wanna check again?

rickb

@Dekari, did you ever figure this out?