Clone a tr, but preserve width

I'm trying to clone a row in table, and insert this row into an empty table. Easy.

But is it possible to preserve the original width of the cells in the tr (that may perhaps be expanded due to other cells in the same column)?

EDIT Just realized I should iterate through the开发者_如何学运维 matching cells after the clone and sync the width. Still curious if there is a more direct way though...

Clone your row, then iterate over the children of the row, setting the width of each child to each child of the original at the corresponding index.

var target = $('#target');
var target_children = target.children();

var clone = target.clone();

clone.children().width(function(i,val) {
    return target_children.eq(i).width();
});

$('<table>',{border:1}).append(clone).appendTo('body');

Example: http://jsfiddle.net/z7hWh/

I'm unsure of browser support for setting width on a <td>.

Specify strict CSS rules.

Possible answers:

• Define them to be the same width for each cell (probably not what you want).
• Use colgroups (recommended).
• Don't define styles for td's, but define them on the table head th. Obviously doesn't work if you don't have a header to your tables.