Allowing different widths of columns in rows

Question

I am trying to get the table columns to have different widths on each row. I'm using an array to get the values which I am turning into width percentages and passing it into the column. The output seems to copy the row above even though it has different widths.

http://jsfiddle.net/0182rutf/2/

HTML

<table border='1' id="table">

JS

var Array = [
    [10, 5, 10],
    [50, 2, 10]
];

for (var k = 0; k < Array.length; k++) 
{       
    var totalCol = 0;
    $.each(Array[k], function (){totalCol += parseInt(this);});
    $('#table').append('<tr id="' + k + '"></tr>')    
    for (var i = 0; i < Array[k][i]; i++) 
    {          
       var weight = Array[k][i];
       var width = weight * 100 / totalCol;
       $('#' + k).append('<td width="' + width + '%">column</td>');
    }

}

Any idea how to fix this?

Answer 1

So as a followup for my comment above.

I would suggest going with flexbox here. But since you know the width of every column you want to draw you can also go without it and still keep IE9 support.

What I am doing here is simply having a div#grid acting as a package for your "table". Then with the JS I generate a div.row kind of like you generated the tr elements and in those I generate the div.cell elements like you would have done with the td elements and set the width directly on those "cells".

I changed your snippet to work: http://jsfiddle.net/0182rutf/5/

CSS:

#grid {
    border: 1px solid black;
}

#grid .row {
    position: relative;
}

#grid .cell {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid green;
}

JS:

var Array = [
    [10, 5, 10],
    [50, 2, 10]
];

for (var k = 0; k < Array.length; k++) 
{       
    var totalCol = 0;
    $.each(Array[k], function (){totalCol += parseInt(this);});
    $('#grid').append('<div class="row" id="' + k + '"></div>')    
    for (var i = 0; i < Array[k][i]; i++) 
    {          
       var weight = Array[k][i];
       var width = weight * 100 / totalCol;
        $('#' + k).append('<div class="cell" style="width: ' + width + '%">column</div>');
       console.log(weight);
    }

}

HTML:

<div id="grid"></div>

Note that with your calculation 50 is a weight that is too much :)

Answer 2

I think may be you can use this solution if you are comfortable. I created two tables and assigned a single row.

<table border='1' id="table0"></table>
<table border='1' id="table1"></table>

and script code is

var Array = [
    [10, 5, 10],
    [50, 2, 10]
];

for (var k = 0; k < Array.length; k++) 
{       
    var totalCol = 0;
    $.each(Array[k], function (){
        totalCol += parseInt(this);

    });
    $('#table' + k).append('<tr id="' + k + '"></tr>')    
    for (var i = 0; i < Array[k].length; i++) 
    {          
       var weight = Array[k][i];
       var width = weight * 100 / totalCol;
       $('#' + k).append
       ('<td width="' + width + '%" >column</td>');
       console.log(weight);
    }

}

And fiddle link is here

Answer 3

Modify your JS to form a div based table and sample output should be as follows:

HTML

<div id="row1">
    <div class="float-left div1">1st </div>
    <div class="float-left div2">2st </div>
    <div class="float-left div2">3st </div>
    <div class="clear-fix"></div>
</div>
<div id="row2">
    <div class="float-left div1">1st </div>
    <div class="float-left div2">2st </div>
    <div class="float-left div2">3st </div>
    <div class="clear-fix"></div>
</div>

CSS

.float-left {
    float:left;
    border: 1px solid #ccc;
}
#row1 .div1 {
    width:100px;
}
#row1 .div2 {
    width:200px;
}
#row1 .div3 {
    width:50px;
}

#row2 .div1 {
    width:50px;
}
#row2 .div2 {
    width:100px;
}
#row2 .div3 {
    width:20px;
}

.clear-fix {
    clear:both;
}