Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-collapse: 'collapse'. If border-collapse is not set, the widths appear correctly.
The code used for this task is quite simple:
var arr = [];
// Copy html from source to destination tr
$abc.html($def.html());
// Now replicate the widths of the table header cells
$def.children().each(function() {arr.push($(this).css("width"));});
$abc.children().each(function(index) {$(this).css("width", arr[index]);});
To see the problem in action, take a look at this Fiddle: http://jsfiddle.net/marvmartian/9z24j7vz/4/
An alternative solution to this issue (demonstrated in the Fiddle but currently commented out) involves checking the final table sizes. If they are not equal, a workaround is applied by increasing the widths before setting them.
This strange behavior might initially seem like a bug, especially while using Chrome. But apparently, it is intentional. What am I overlooking here?