Adding a column to a table (using jQuery) makes the table larger, why?

Question

So, I'm building a table data editor, and need funcitonality that's not available in the ready-built plugins. This is my code so far:

http://sandman.net/test/tables.php

But I'm having problem with my "add column" ("Lägg till kolumn") button, which correctly adds a column, but makes the table one column larger in the process. I've even tried to set the TD widths to percentages after the fact but it doesn't work.

How do I add a column and make it automatically resize all columns for it to fit in the preset width?

Answer 1

Nice work you have there.I'm wondering is the re-adjusting of the existing column width still in effect? It seems like it is not.

I ran these in firebug, the table never gets widen after that:

$('.editgrid td input').css('width','100%');
$('.editgrid ').css('width','100%');
$('.editgrid td.gridvalue').css('width','25%');  //use (100 / datacolumn count) % instead
$('.editgrid td.controller').css('width','7px');

Hope this can help you to find your solution.

Answer 2

What you could do is set new widths for each column in Javascript as you add a column.

// Get current column count
var columnCount = $('table').children();

// Calculate new column width
var columnWidth = 100 / (columnCount + 1);

// Apply width to each column
$('table').children().each(row, function() {
    row.style.width = columnWidth + 'px';
}

I never work with jQuery so I hope the syntax is right. Your editor looks great btw ;-)