按比例调整表的列大小

Question

Is there any Javascript library that can resize table in the next way:

if I change size of a column, all the columns to the right of this one should be resized proportionaly to it's current size.

For example:

We have a table with 4 columns:

11px | 20px | 10px | 30px

Total width of the table is 71px.

So, if I change width of the second column by 20px, the all columns located to the right of this column should change it's size proportionaly to it's current size. So, for this example the table should looks like:

11px | 40px | 5px | 15px

So, the width for the third column is calculating in this way:

10 - 10/(10 + 30) * 20 = 5px

For the fourth:

30 - 30 / (10 + 30) * 20 = 15px;

Total width should remain the same as in init table: 71px(for this example).

Answer 1

Here's a fiddle http://jsfiddle.net/ngZEB/

An explanation of the code, because it turned out a little messy..

var cols = document.getElementsByTagName('td'), 
    Widths = [11,20,10,30],
    totalWidth = 71,
    CommonWidth,
    WidthLeft,
    ColThatWillBeChaned,
    coef = [];

//setting the widths of the actual elements
for(i=0;i<4;i++){
    cols[i].style.width = Widths[i]+'px';
    coef[i] = Widths[i]/totalWidth;
}

//Pretty self explanatory
ColThatWillBeChaned = 1;
Widths[ColThatWillBeChaned] += 20;


//Initializing width that will be left after the new column width has taken place
WidthLeft = totalWidth;

//The width that the elements to the right are sharing before the changes
CommonWidth = 0;
for(i=0;i<4;i++){
    if(i<=ColThatWillBeChaned){
        WidthLeft -= Widths[i];        
    }else{
        CommonWidth += Widths[i];
    }
}
for(i=(ColThatWillBeChaned+1);i<4;i++){
    //The new coefficient that determines what portion of the new width the 
    //current element will be taking
    coef[i] = Widths[i]/CommonWidth;

    //actually setting the width
    Widths[i] = WidthLeft*coef[i]
}

Basically what I'm doing is a bunch of calculations that I can't really explain well enough. I hope you understand my answer. All the best!