javascript - cell width attribute not copied correctly when border-collapse -

javascript - cell width attribute not copied correctly when border-collapse -

i'm cloning table header line copying tr html , copying th widths. fails, because widths written (width minus w) pixels when border: 'wpx' , border-collapse: 'collapse'. if border-collapse not set, widths written correctly.

the code simpleminded:

var arr = []; // re-create html, abc destination <tr> , def source $abc.html($def.html()); // re-create widths of table header cells $def.children().each(function() {arr.push($(this).css("width"));}); $abc.children().each(function(index) {$(this).css("width", arr[index]);});

fiddle shows issue: http://jsfiddle.net/marvmartian/9z24j7vz/4/

a workaround (illustrated in fiddle commented out) check final table sizes, and, if unequal, (hackily) add together w widths before writing them.

this behavior seems bug (using chrome). apparently it's feature. missing here?

and, here fix:

table.pvttable tr th { background-color: #e6eeee; border: 6px solid black; padding: 5px; box-sizing:border-box; }

chrome doesn't calculate cell widths width + th border width (because border-collapse,on parent element, guess?), if add together in css - borders included in final width. however, not sure 1 (firefox or chrome) right, time. :)

fiddle: http://jsfiddle.net/9z24j7vz/5/

javascript jquery css