Search code examples
jqueryhtmlhtml-tablewidthclone

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

Solution

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