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

Closed. This question needs debugging details. It is not currently accepting answers.

---

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 7 years ago.

Improve this question

I'm building a table data editor, and need functionality 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?

---

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.

---

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 ;-)