Question

Hi I am copying entire table rows from one html table to another. In the source table the column widths are 5%, 40% 55% for the three td’s like so:

<td style="width:5%">

Now in the target table I have 4 columns I want their widths to be 10%, 40%, 40% and 10% respectively

Heres how I copy the rows

$("#table_source img.move-row").live("click", function() {
var tr = $(this).closest("tr").remove().clone();
tr.append('<td style="width:10%"><img class="role_action" src="/gra/plus.png/></td>');
$("#table_target tbody").append(tr);

How do I change the widths in the most easiest way for the source tables existing columns.

Answer 1

If you have access to modify the original HTML of the tables, I would suggest using col tags to define the widths. This way the width is not defined on the individual td tags but the table as a whole. Then when moving tds between the tables the width will be handled automatically.