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?

quite simply, you can't do that (there is a way with colspan's but that's just crazy talk) - far easier to use inline-blocks, or floating blocks, or flexbox (as long as you don't want to support IE9 or less) ... in essence, what you want is not a table = two dimensional grid — Jaromanda X, Jul 29 '15 at 09:29
I am not quite sure if table is the right choice here, as you want to ignore the concept of columns by giving cells the individual width. I would also recommend checking out Flexbox and make your own Rows that way. — Schneeez, Jul 29 '15 at 09:34
You can not do it with tables unless you use nested tables. You can use div and give different width to each column — Asad Nauman, Jul 29 '15 at 09:38

Schneeez · Accepted Answer · 2015-07-29T09:58:18.557

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

score 0 · Answer 2 · answered Jul 29 '15 at 09:47

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

score 0 · Answer 3 · edited Jul 29 '15 at 09:57

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

Creating a table element for each row kind of defeats the purpose doesn't it? — Schneeez, Jul 29 '15 at 09:56

Allowing different widths of columns in rows

3 Answers3