Synchronising headers width of two different tables

Hello,

I need to build a table that can be scrollable with fix header. The best solution for me is to use two tables, one for the header and the other for the body cells.

My table must be elastic and its content is dynamic, thus [U]it is not[/U] possible for me to set the columns a fixed width at each column as the parent is also elastic.

The best example I’ve found is this [URL=”http://archfirst.org/examples/mobile-grid-evaluation/jquery-mobile-html-table-iscroll”]jQueryMobile Table-IScroll[/URL]

This example works perfectly, but I have a concern with it. As I will use this way for many different tables in many different page some of they will have some header provided with colspan different than 1. Also, in some page certain tables may have body cell that uses the all the row cell (colspan = “table cell count”).

Here is what I need : I want to improve the function which allows the width of the headers table to be the same as those in the body table. In the previous jQueryMobile Table-IScroll example this is what it is used:

[CODE]
var headerColumns = $(‘#positions-table-header tr th’);
var bodyColumns = $(‘#positions-table-body tr:first td’);
for (var i = 0; i < headerColumns.length; i++) {
$(headerColumns[i]).width($(bodyColumns[i]).width());
}
[/CODE]

For a table having all cell with a colspan = 1, it works perfectly. Now imagine that the header table have two row of header and the body table have a also row containing a cell having (colspan =7) with a class named trMyGroup.

[LIST]

[CODE]
En-tête En-tête
En-tête En-tête En-tête En-tête En-tête En-tête En-tête
[/CODE]

Here is what I’ve done to adapt this algorithm to work properly :

[CODE]
var headerColumns = $(‘#positions-table-header tr:nth-child(2) th’);
var bodyColumns = $(‘#positions-table-body tr:not(.trMyGroup) td’);
for (var i = 0; i < headerColumns.length; i++) {
$(headerColumns[i]).width($(bodyColumns[i]).width());
}
[/CODE]

That it works great ?

But would there be a way to automate this synchronization mechanism a bit more without me having to repeat and change the filters for jQuery on each different page with different table header ? I mean a code that would work regardless of the number of colspan or row header. Knowing that the two tables will always have the same number of columns in finality there must be a way…

If anyone has faced this problem or produce an similar algorithm, I would be very grateful ?

[I] PS: I can not use the [I]jQuery DataTable[/I], I used it before, but due to some other limitations I removed it. So I decide to take a look at the source code to see how they do to column synchronization but honestly I don’t understand much. [/ I]

Best regards,

Also in #JavaScript _↴