Разрешающая разная ширина столбцов в строках

Question

Я пытаюсь получить столбец таблицы с разной шириной в каждой строке. Я использую массив, чтобы получить значения, которые я превращаю в проценты по ширине и передавая их в столбец. Вывод, похоже, копирует строку выше, даже если она имеет разную ширину.

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

} 

Любая идея, как это исправить?

Answer 1

Так как катамнестического для мой комментарий выше.

Я предлагаю пойти с flexbox здесь. Но так как вы знаете ширину каждого столбца, который хотите рисовать, вы также можете обойтись без него и по-прежнему поддерживать поддержку IE9.

То, что я здесь делаю, просто имеет сетку div #, действующую как пакет для вашей «таблицы». Затем с помощью JS я генерирую div.row, как вы сгенерировали tr-элементы, и в тех случаях, когда я генерирую элементы div.cell, как вы бы сделали с элементами td и задали ширину непосредственно на этих «ячейках».

Я изменил свой фрагмент кода для работы: 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> 

Обратите внимание, что ш то ваш расчет 50 - это слишком большой вес :)

Answer 2

Измените JS, чтобы сформировать таблицу и пример вывода на основе DIV должен быть следующим:

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

Answer 3

Думаю, вы можете использовать это решение, если вам удобно. Я создал две таблицы и назначил одну строку.

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

и коды скрипта

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

} 

И скрипка ссылка here